Tabellenmanipulation mit jQuery

Question

Ich verwende DataTables , um einige XML-Daten anzuzeigen, die ich herankomme, aber ich suche nach einem etwas anderen Ansatz. Ich würde gerne Suchfelder über jeder Spalte haben und sie idealerweise mit den Werten aus den Ergebnissen füllen. Anstatt also das Feld "Suchen" auf ihrer Seite, würde ich ein Kästchen über jeder Spalte mit Werten haben (Sprich zum Rendern) Engine: Trident, WebKit, Gecko usw. in einer Combobox). Kann ich die DataTables jQuery ändern, um dies zu ermöglichen, oder sollte ich von vorne anfangen? Es scheint beängstigend, aber ich bin immer noch ziemlich neu in jQuery. Alle Antworten werden sehr geschätzt. Danke im Voraus.

Edit: danke für die Antworten. Ich benutze Datatables mit den Kombinationsfeldern, die als Vorsatz vorgeschlagen wurden und die mit allen Werten aus den Spalten (nicht nur den auf der angezeigten Seite) gefüllt werden, aber wenn ich einen Wert auswähle, scheint es nicht zu feuern Ereignis, das das Raster erneut lädt. Dies ist meine jQuery-Code auf der Seite:

<script type="text/javascript"> 
    $(document).ready(function() { 


    <!-- Sorting and pagination --> 
    var oTable = $('#mainTable').dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "bFilter": false 
    }); 

    <!-- Filtering --> 
    $("thead td").each(function(i) { 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
     oTable.fnFilter($(this).val(), i); 
     }); 
    }); 
    }); 
</script> 

Zusätzlich habe ich diese Funktionen auf den Boden des jquery.dataTables.js hinzugefügt, wie auf dieser Seite folgt: http://datatables.net/examples/api/multi_filter_select.html

(function ($) { 
/* 
* Function: fnGetColumnData 
* Purpose: Return an array of table values from a particular column. 
* Returns: array string: 1d data array 
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function 
*   int:iColumn - the id of the column to extract the data from 
*   bool:bUnique - optional - if set to false duplicated values are not filtered out 
*   bool:bFiltered - optional - if set to false all the table data is used (not only the filtered) 
*   bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array 
* Author: Benedikt Forchhammer <b.forchhammer /AT\ mind2.de> 
*/ 
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) { 
    // check that we have a column id 
    if (typeof iColumn == "undefined") return new Array(); 

    // by default we only wany unique data 
    if (typeof bUnique == "undefined") bUnique = true; 

    // by default we do want to only look at filtered data 
    if (typeof bFiltered == "undefined") bFiltered = true; 

    // by default we do not wany to include empty values 
    if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true; 

    // list of rows which we're going to loop through 
    var aiRows; 

    // use only filtered rows 
    if (bFiltered == true) aiRows = oSettings.aiDisplay; 
    // use all rows 
    else aiRows = oSettings.aiDisplayMaster; // all row numbers 

    // set up data array  
    var asResultData = new Array(); 

    for (var i = 0, c = aiRows.length; i < c; i++) { 
     iRow = aiRows[i]; 
     var aData = this.fnGetData(iRow); 
     var sValue = aData[iColumn]; 

     // ignore empty values? 
     if (bIgnoreEmpty == true && sValue.length == 0) continue; 

     // ignore unique values? 
     else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; 

     // else push the value onto the result data array 
     else asResultData.push(sValue); 
    } 

    return asResultData; 
} 
} (jQuery)); 


function fnCreateSelect(aData) { 
var r = '<select><option value=""></option>', i, iLen = aData.length; 
for (i = 0; i < iLen; i++) { 
    r += '<option value="' + aData[i] + '">' + aData[i] + '</option>'; 
} 
return r + '</select>'; 
} 

Als ich ein Set Haltepunkt in FnFilter und ändere den Wert eines der Filter Drop-Down-Boxen, der Haltepunkt wird nicht getroffen, aber es wird getroffen, wenn ich einen in FnCreateSelect gesetzt. Mache ich etwas falsch?

Answer 1

Ich verwende und Liebe DataTables- überprüfen Sie diesen Link:

http://www.datatables.net/examples/api/multi_filter.html

und diese ein:

http://datatables.net/examples/api/multi_filter_select.html

Answer 2

Auschecken PicNet Table Filter. Wenn Sie es lieber selbst bauen möchten, können Sie dieses Tutorial auf Using jQuery To Manipulate and Filter Data beginnen.

Answer 3

Das Rasterdaten-Plugin jqgrid verfügt über diese Funktionalität. Du kannst es dir anschauen. Sie können mehr über das Such-Plugin here finden.