Individual column searching on dropdowns

Individual column searching on dropdowns

jolan1234jolan1234 Posts: 2Questions: 1Answers: 0

There is already the following example for column filtering which works provided that the <td>'s in that column contain text:

But in my scenario each '<td>'s for the column I want to filter contains a '<select>'.

This is my code so far:

initComplete: function () {
            let filterVals = [];
            this.api().columns([10]).every( function () {
                let column = this,
                    select = $('<select class="form-control"><option value=""></option></select>')
                        .appendTo($('thead tr:eq(1) th:eq(' + this.index()  + ')'))
                        .on('change', function () {
                            let val = $.fn.dataTable.util.escapeRegex(

                                .search( val ? '^'+val+'$' : '', true, false)

       (d, j) {
                    let selectedVal = $(d).find(":selected").val();

                    if (!filterVals.includes(selectedVal)) {
                        select.append('<option value="'+selectedVal+'">'+selectedVal+'</option>');

I managed to construct the filter dropdown but can't figure out what to do from here. Will even work in this scenario or do I have to do something else?

This question has an accepted answers - jump to answer


  • colincolin Posts: 15,028Questions: 1Answers: 2,570

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.



  • kthorngrenkthorngren Posts: 19,496Questions: 26Answers: 4,619

    There are different ways this could be done depending on how you implemented the select list and what you are doing with the data. You will need some code to keep up with the selected option each time it changes. Take a look at this Editor checkbox example. If you aren't using Editor the concepts will be the same.

    The example uses columns.render to render the input's HTML. The rowCallbback function is used to update the input's state based on the data in the cell. It uses the Editor's edit() API to update the server's DB with the changed value. If you aren't using Editor then you would use a select change event handler to update the data, either locally or at the server.

    For more specific help please provide a simple test case replicating what your are trying to do. We can then update the test case with a running example.


  • jolan1234jolan1234 Posts: 2Questions: 1Answers: 0

    thank you for the quick replies guys!

    Here's a test case as requested:

    Please take a look at the last column("active").

  • kthorngrenkthorngren Posts: 19,496Questions: 26Answers: 4,619
    Answer ✓

    Here is one way to do this:

    The example uses orthogonal data to get the selected option value for both searching and sorting. I added an event handler for the Active column select inputs (added a name attribute to the select inputs in HTML to target only them). Basically it keeps the selected option updated in HTML and uses cell().invalidate() to have Datatables update its data cache with the newly selected option.


Sign In or Register to comment.