jQuery Datatables - Filter input fields

Question

How does one filter input fields (user input in text boxes, hidden fields, selects, textareas, etc.) in a datatable?

    $('#datatable').dataTable({
        "aoColumnDefs": [
            { "aTargets": [0], "bSearchable": true }, // <input type="text">
            { "aTargets": [1], "bSearchable": true }, // <select>
            { "aTargets": [2], "bSearchable": true }, // radio buttons
        ],
        "aaSorting": [[1, 'asc']]
    });

Answer 1

Seems like you're using an older version of it (if the version the tag you added is true to what you're using).

The field for searching is here .

And, you can have some real fun with it using the filtering example API

That should get you started on the path you want. Check out the other examples. I've used this a few times and it's quite nice for many tasks.

Answer 2

If you're using 1.8.2 or later you can use fnServerParams, which is added to your table init code like so:

...
"aaSorting": [[1, 'asc']],
"fnServerParams": function (aoData) {
       aoData.push({ "name": "my-id", "value": $('#my-selector').val() });
},
...

In this example, every time the table is redrawn, the my-id value is passed as a parameter from an <input id="my-selector"... , which can obviously be any kind of input, field or element that you need to get the value of.

Your datasource will need to know to expect this new parameter (you don't specify what datasource you're using, but here's an example for sAjaxSource using server-side c#):

var customParam = Request.QueryString["my-id"];

You can also use fnDraw() to trigger the filtering from a button, link etc.