Tabelle Manipulation mit jQuery

Question

Ich bin mit Tables einige XML-Daten anzuzeigen, in Ich habe kommen, aber ich bin für einen etwas anderen Ansatz suchen. Ich möchte Suchfelder über jeden Spalt haben und sie idealerweise mit den Werten aus den Ergebnissen zu füllen .. so statt dem „Suche“ -Box auf ihrer Seite, würde ich über jeden Spalt mit Werten einen Kasten hat (Say, für Rending Motor: Trident, WebKit, Gecko, usw. in einer Combo-Box). Kann ich die Tables jQuery ändern für dieses oder sollte ich von vorne anfangen zu können. Es scheint entmutigend, aber ich bin noch recht neu zu jQuery. Alle mögliche Antworten werden sehr geschätzt. Vielen Dank im Voraus.

Edit: Danke für die Antworten. Ich verwende Datentabellen mit den Kombinationsfeldern wie predrag vorgeschlagen, die mit allen Werten aus den Spalten aufgefüllt werden (und nicht nur die, die auf der angezeigten Seite), aber wenn ich einen Wert aus, es scheint nicht das Feuer Fall, dass das Gitter neu lädt. Dies ist mein 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>';
}

Wenn ich einen Haltepunkt in fnFilter gesetzt und man den Wert der Dropdown-Felder des Filters ändern, wird der Haltepunkt nicht getroffen zu werden, aber es hat Erfolg, wenn ich ein 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:

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

Answer 2

Schauen Sie sich PicNet Tabellenfilter . Wenn Sie es vorziehen, es selbst zu bauen, dieses Tutorial auf jQuery zu manipulieren und Daten filtern erhalten können Sie begonnen haben.

Answer 3

Die jqGrid Rasterdaten Plugin hat diese Funktionalität. Sie können einen Blick in sie haben.

Sie können mehr über die Suche finden Plugin hier .