Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,953

  May 2018 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
• giorgi1517 Posts: 2Questions: 0Answers: 0

  May 2020

  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 Posts: 15,240Questions: 1Answers: 2,599

  May 2020

  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 Posts: 2Questions: 0Answers: 0

  May 2020

  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 Posts: 9Questions: 2Answers: 0

  December 2020

  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 Posts: 15,240Questions: 1Answers: 2,599

  December 2020

  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 Posts: 4Questions: 1Answers: 0

  December 2021

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

  March 2022

  Hi Colin,

  filter by Name search is not working.
• colin Posts: 15,240Questions: 1Answers: 2,599

  March 2022

  @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 Posts: 8Questions: 4Answers: 1

  July 2022 edited July 2022

  @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 Posts: 63,506Questions: 1Answers: 10,471 Site admin

  July 2022

  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 Posts: 11Questions: 3Answers: 1

  August 2022

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