Manipolazione delle tabelle con jQuery

Question

Sto utilizzando DataTables per visualizzare alcuni dati XML che ho inserito, ma sto cercando un approccio leggermente diverso. Mi piacerebbe avere caselle di ricerca su ogni colonna e idealmente li popolano con i valori dei risultati .. quindi invece della casella "Cerca" sulla loro pagina, avrei una casella sopra ogni colonna con valori (Say, for Rending Motore: Trident, WebKit, Gecko, ecc. In una casella combinata). Posso modificare jQuery DataTables per consentire questo o dovrei ricominciare da capo. Sembra scoraggiante, ma sono ancora piuttosto nuovo per jQuery. Qualsiasi risposta è molto apprezzata. Grazie in anticipo.

Modifica: grazie per le risposte. Sto usando Datatables con le caselle combinate come suggerito da predrag, che vengono popolate con tutti i valori delle colonne (non solo quelli della pagina visualizzata), ma quando seleziono un valore, non sembra che il evento che ricarica la griglia. Questo è il mio codice jQuery nella pagina:

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

Inoltre, ho aggiunto queste funzioni nella parte inferiore del jquery.dataTables.js come segue da questa pagina: 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>'; 
} 

Quando ho creato un breakpoint in fnFilter e modifica il valore di una delle caselle a discesa del filtro, il punto di interruzione non viene colpito, ma viene colpito quando ne imposto uno in fnCreateSelect. Sto facendo qualcosa di sbagliato?

Answer 1

io uso e datatables amore, controllare questo link:

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

e questo:

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

Answer 2

Check out PicNet Table Filter. Se preferisci farlo da solo, questo tutorial su Using jQuery To Manipulate and Filter Data potrebbe aiutarti a iniziare.

Answer 3

Il plug-in dati griglia jqgrid ha questa funzionalità. Puoi dare un'occhiata a questo.

È possibile trovare ulteriori informazioni sul plug-in di ricerca here.