jQuery Datatables bSearchable filter on input values

Question

Alright so I have a pretty standard dynamic datatable but I cannot seem to get the search box to filter based on the value of an input or select box.

oTable = $('#itemTable').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "sDom": '<""f>t<"F"lp>',
            "aoColumns": [
                { "sWidth": "45px", "bSearchable": false},
                { "sWidth": "150px"}, // <input type="text">
                { "sWidth": "150px"}, // <select>
                { "sWidth": "150px"}, // <select>
                { "sWidth": "125px"}, // <input type="text">
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false}
            ],

How can I get the datatable to filter the search results based on the value of a text box, and/or the current selected value of a select box?

I found this jQuery DataTables - custom filter for column that contains text field but I cant seem to make that work for me

Answer 1

I managed to get this to work using the jquery-datatables-column-filter plugin for jquery datatables

once you include that you can just add .columnFilter() to your datatable. The great part about this plugin is you can use the data tables "aoColumns" as normal and the .columnFilter() just overwrites that particular columns, I just included other datatable settings to show this, see example below:

var asInitVals = new Array();

$(document).ready(function() {
    var oTable = $('#myTable').dataTable( {
        "bPaginate": true,
        "fnDrawCallback":function(){$('.edit').editable(function(value, settings) { 
                            hasBeenEdited(this);
                            return(value);
                         }, { 
                            type    : 'text',
                            submit  : 'OK'
                        });},

        "oLanguage": {
            "sSearch": "Search all columns:",
        },
        "aoColumns": [
                        { "bSortable": true ,"bSearchable": true},
                        { "bSearchable": true},
                        {"bSortable": true ,  "bSearchable" : true}, 
                        {"bSearchable": true }, 
                        {"bSearchable": true }, 
                        { },
                        { }
                    ]
    } ).columnFilter({"aoColumns":[{ type: "select", values: [ 'Value 1', 'Value 2', 'Value 3']  },
         null,
         null,
         null,
         null,
         null,
         null]});
} );

Answer 2

You can use mRender attribute in the aoColumns to specify the selected value of the select box for filtering

"mRender": function ( data, type, full ) {
    if (type === "filter")
    {
          node = $.parseHTML(data);
          var val = $(node).find("select option:selected").text();                     
              return val;
    }
    return data;
}