Multi-Select columns

sjw01

Using this example to filter columns: https://datatables.net/manual/api#Example---column-filter

Is it possible to use a multi-select and filter on more than one value?

kthorngren

I believe the YADCF plugin has options for this. Or you could use Select2 to select multiple options. Here is a Select2 example:
http://live.datatables.net/xehexoye/1/edit

Kevin

giorgi1517

Hi, Kevin appreciate the example.. for some reason
some selects don't appear and work as expected. I changed only position to header nothing more in the code.. what do you think can be the cause they clearly have select2 class

colin

Without it seeing it, it's hard to say. 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

giorgi1517

I found the problem it was because the title was in Georgian and id were changed to ---- I made another row with English title and now everything is working thanks

Wizard85

http://live.datatables.net/xehexoye/1/edit

In the above example, if i added the fixedcolumn, the dropdown doesn't work. Can you help me?

colin

See this example from this thread - that should get going. If not, can you open a new thread as it's not related to this thread.

Colin

TechCoder

further to @kthorgren's example for Select2, here is a working example to constantly update the Search boxes on new/edit. Using only initComplete provides only an update on the table load - with just a few small changes, it will load all the time, making a better UX.

This is not a direct answer to the question, though it does give an example I could not find anywhere else on the forum - I trust it is acceptable here and can help someone else that needs live updates to search box dropdowns.

 // set up the redraw boolean to allow updating on table load (no need for InitComplete)
    var redraw = true;
    var table = $('#table').DataTable({
        // set up the dom to fit the search boxes (Bootstrap 5 shown with 3 search boxes) as needed for your page
        dom: "<'row'<'col-sm-2'B><'S1 col-sm-2'><'S2 col-sm-2'><'S3 col-sm-2'><'col-sm-2'f>>rtip",
        // set up the 'Filter' search boxes at the top of the page to load on Draw (not only on initComplete)
        // this provides automatic/live updates to the search boxes with new/changed data
        drawCallback: function (settings) {
            if (redraw === true) {
                this.api().columns().every(function () {
                    var title = this.header();
                    var checktitle = $(title).html()
                    //  only make the search boxes for certain columns
                    // the title of the column is checked and then 'classtitle' is where it will be placed in the dom
                    if (checktitle === "First Header to check" || checktitle === "Second Header to check" || checktitle === "Third Header to check") {
                        var classtitle = checktitle;
                        if (checktitle === "First Header to check") {
                            classtitle = "S1";
                        }
                        else if (checktitle === "Second Header to check") {
                            classtitle = "S2"
                        }
                        else if (checktitle === "Third Header to check") {
                            classtitle = "S3"
                        }
                        // clear the old list
                        classtitle = $("." + classtitle);
                        classtitle.empty();
                        //replace spaces with dashes
                        title = $(title).html().replace(/[\W]/g, '-');
                        var column = this;
                        var select = $('<select id="' + title + '" class="select2" "></select>')
                            .appendTo(classtitle)
                            .on('change', function () {
                                //Get the "text" property from each selected data
                                //regex escape the value and store in array
                                var data = $.map($(this).select2('data'), function (value, key) {
                                    return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                                });
                                //if no data selected use ""
                                if (data.length === 0) {
                                    data = [""];
                                }
                                //join array into string with regex or (|)
                                var val = data.join('|');
                                //search for the option(s) selected
                                column
                                    .search(val ? val : '', true, false)
                                    .draw();
                            });
                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                        //use column title as selector and placeholder
                        $('#' + title).select2({
                            multiple: true,
                            closeOnSelect: false,
                            placeholder: "Select a " + title
                        });
                        //initially clear select otherwise first option is selected
                        $('.select2').val(null).trigger('change');
                    }
                    // set redraw to false to stop continuous loops
                    redraw = false;
                });
                // set redraw to true to allow the boxes to refresh
                redraw = true;
            }
        }
    });

ashish.shankar

Hi Colin,

filter by Name search is not working.

colin

@ashish.shankar Is that related to this thread? If not, please create a new thread, and either way, 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

gwiqu

@colin do you know why that does the select2 example by @kthorngren floods my server with so many http requests?

edit: i found out the reason why, it is because of
$('.select2').val(null).trigger('change');

solved this by using
$('.select2').val(null);
$('.select2-selection__rendered').html('');

instead

allan

Thanks for the update - sounds like there is a circular event handler when setting null and triggering change. Good to hear you've got a solution.

Allan

kender

If you aren't using the select2 plugin you can use a multiple select

Add "multiple" to the select build on Line 32 and change how the var is built on lines 37-39 above in @TechCoder answer)

32

var select = $('<select id="' + title + '" multiple size="5"></select>')

37-39

var data = $.map( $(this).val(), function (value, key) {
  return value ? '^' + $.fn.dataTable.util.escapeRegex(value) + '$' : null;
});