Individual column searching on dropdowns

jolan1234

There is already the following example for column filtering which works provided that the <td>'s in that column contain text:
https://datatables.net/examples/api/multi_filter_select.html

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(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false)
                                .draw();
                        });

                column.data().unique().sort().each(function (d, j) {
                    let selectedVal = $(d).find(":selected").val();

                    if (!filterVals.includes(selectedVal)) {
                        filterVals.push(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 column.search even work in this scenario or do I have to do something else?

colin

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.

Cheers,

Colin

kthorngren

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.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jolan1234

thank you for the quick replies guys!

Here's a test case as requested:
http://live.datatables.net/lejodiqo/1/

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

kthorngren

Here is one way to do this:
http://live.datatables.net/lejodiqo/2/edit

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.

Kevin