Obsługa tabel za pomocą jQuery

Question

Używam DataTables do wyświetlania niektórych danych XML, które mam, ale szukam nieco innego podejścia. Chciałbym mieć pola wyszukiwania nad każdą kolumną i najlepiej wypełnić je wartościami z wyników. Zamiast więc pola "Szukaj" na ich stronie, miałbym pole nad każdą kolumną z wartościami (Powiedz, dla Renderowania Silnik: Trident, WebKit, Gecko itp. W polu kombi). Czy mogę zmienić jQuery DataTables, aby to umożliwić, czy powinienem zacząć od zera. Wydaje się być zniechęcającym, ale wciąż jestem całkiem nowym użytkownikiem jQuery. Wszelkie reakcje są mile widziane. Z góry dziękuję.

Edytuj: dzięki za odpowiedzi. Używam Datatables z polami kombi jako sugerowanymi przez predrag, które są zapełniane wszystkimi wartościami z kolumn (nie tylko tymi na wyświetlanej stronie), ale kiedy wybieram wartość, nie wydaje się wystrzelić zdarzenie, które ponownie ładuje siatkę. To jest mój kod jQuery na stronie:

<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> 

Dodatkowo Dodałem te funkcje do dołu jquery.dataTables.js jak wynika to z tej strony: 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>'; 
} 

Kiedy ustawić Punkt przerwania w fnFilter i zmiana wartości jednego z pól rozwijanych filtru, punkt przerwania nie zostanie trafiony, ale zostanie trafiony, gdy ustawię go w fnCreateSelect. czy robię coś źle?

Answer 1

używam i DataTables miłosne, sprawdź ten link:

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

i to jedno:

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

Answer 2

Zapoznaj się z PicNet Table Filter. Jeśli wolisz go zbudować samodzielnie, ten samouczek na stronie Using jQuery To Manipulate and Filter Data może Ci pomóc.

Answer 3

Wtyczka danych siatki gridowej jqgrid ma tę funkcję. Możesz się temu przyjrzeć.

Możesz znaleźć więcej informacji na temat wtyczki wyszukiwania here.