Multi-Select columns

Multi-Select columns

sjw01sjw01 Posts: 64Questions: 35Answers: 1

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 16,772Questions: 25Answers: 3,970
    Answer ✓

    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

  • giorgi1517giorgi1517 Posts: 2Questions: 0Answers: 0

    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

  • colincolin Posts: 14,442Questions: 1Answers: 2,460

    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

  • giorgi1517giorgi1517 Posts: 2Questions: 0Answers: 0

    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

  • Wizard85Wizard85 Posts: 9Questions: 2Answers: 0

    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?

  • colincolin Posts: 14,442Questions: 1Answers: 2,460

    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

  • TechCoderTechCoder Posts: 4Questions: 1Answers: 0

    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.shankarashish.shankar Posts: 1Questions: 0Answers: 0

    Hi Colin,

    filter by Name search is not working.

  • colincolin Posts: 14,442Questions: 1Answers: 2,460

    @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

  • gwiqugwiqu Posts: 8Questions: 4Answers: 1
    edited July 26

    @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

  • allanallan Posts: 56,836Questions: 1Answers: 9,033 Site admin

    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

  • kenderkender Posts: 3Questions: 1Answers: 1

    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;
    });
    
Sign In or Register to comment.