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

I just realized i need to be using mDataProp....this question is on hold as I work through this... — Chris Worrell
– Chris Worrell, Commented Jan 16, 2013 at 20:36

jonnie · Accepted Answer · 2013-02-27 11:34:30Z

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]});
} );

Ahmad · Accepted Answer · 2013-11-07 13:03:48Z

0

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

answered Nov 7, 2013 at 13:03

Ahmad

9,81613 gold badges96 silver badges167 bronze badges

Collectives™ on Stack Overflow

jQuery Datatables bSearchable filter on input values

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related