Table manipulation with jQuery

Question

I'm using DataTables to display some XML data I have coming in, but I'm looking for a slightly different approach. I'd like to have search boxes over each column and ideally populate them with the values from the results.. so instead of the "Search" box on their page, I would have a box above each column with values (Say, for Rending Engine: Trident, WebKit, Gecko, etc. in a combo box). Can I alter the DataTables jQuery to allow for this or should I start from scratch. It seems daunting, but I am still rather new to jQuery. Any responses are greatly appreciated. Thanks in advance.

Edit: thanks for the responses. I'm using Datatables with the combo boxes as predrag suggested, which are being populated with all the values from the columns (not just the ones on the displayed page), but when I select a value, it doesn't seem to fire the event that reloads the grid. This is my jQuery code on the page:

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

Additionally, I have added these functions to the bottom of jquery.dataTables.js as follows from this page: 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>';
}

When I set a breakpoint in fnFilter and change the value of one of the filter drop-down boxes, the breakpoint does not get hit, but it does get hit when I set one in fnCreateSelect. Am I doing something wrong?

Answer 1

I use and love datatables, check this link:

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

and this one:

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