Manipulación de tablas con jQuery

Question

Estoy usando DataTables para mostrar algunos datos XML en los que he entrado, pero estoy buscando un enfoque ligeramente diferente. Me gustaría tener cuadros de búsqueda sobre cada columna e idealmente llenarlos con los valores de los resultados ... así que en lugar del cuadro "Buscar" en su página, tendría un cuadro sobre cada columna con valores (por ejemplo, para desgarrar) Motor: Trident, WebKit, Gecko, etc. en un cuadro combinado). ¿Puedo modificar DataTables jQuery para permitir esto o debo comenzar desde cero? Parece desalentador, pero todavía soy bastante nuevo en jQuery. Cualquier respuesta es muy apreciada. Gracias por adelantado.

Editar: gracias por las respuestas. Estoy utilizando Datatables con los cuadros combinados como se sugirió predrag, que se completan con todos los valores de las columnas (no solo los de la página mostrada), pero cuando selecciono un valor, no parece que se active el evento que vuelve a cargar la grilla Este es mi código jQuery en la página:

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

Además, he añadido estas funciones en la parte inferior de la siguiente manera jquery.dataTables.js de esta página: 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>'; 
} 

Cuando me juego una punto de interrupción en fnFilter y cambiar el valor de uno de los cuadros desplegables de filtro, el punto de interrupción no se golpea, pero se golpea cuando configuro uno en fnCreateSelect. ¿Estoy haciendo algo mal?

Answer 1

yo uso y tablas de datos amor, consulte este enlace:

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

y éste:

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

Answer 2

Echa un vistazo PicNet Table Filter. Si prefiere construirlo usted mismo, este tutorial en Using jQuery To Manipulate and Filter Data puede comenzar.

Answer 3

El complemento de datos de cuadrícula jqgrid tiene esta funcionalidad. Puedes echarle un vistazo.

Puede encontrar más sobre el complemento de búsqueda here.