1

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

2 Answers 2

1

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.

Sign up to request clarification or add additional context in comments.

Comments

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.