Datatables with column filter dropdowns and multiple checkbox selection

datatables filter dropdown
laravel datatables filter by column with input select
datatable multiple filter
angular datatable filter dropdown
jquery datatable header filter with dropdown and textbox
datatables individual column search dropdown
jquery table column filter dropdown
datatables search multiple columns

I found this excellent code from joao vitor retamero - fiddle: https://jsfiddle.net/jvretamero/bv6g0r64/ that shows how to make multiple selections in jquery datatable column filters. But I need to transform the filter containers into dropdowns, with each item in the container being a checkbox. Yes, there are many references to this, as I've found out during several hours of researching. But I'm yet to find any examples, or any clear explanations of how to do this, despite many saying it's possible with jquery plugin. Can anyone point to any examples? I've no clue how to even start. Many thanks.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></script>

    $(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select multiple="multiple"><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var vals = $('option:selected', this).map(function (index, element) {
                            return $.fn.dataTable.util.escapeRegex($(element).val());
                        }).toArray().join('|');

                        column
                            .search( vals.length > 0 ? '^('+vals+')$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

Try this, which doesn't use any extra JS/jQuery libraries:

// This code has been beautified via http://jsbeautifier.org/ with 2 spaces indentation.
$(document).ready(function() {
  function cbDropdown(column) {
    return $('<ul>', {
      'class': 'cb-dropdown'
    }).appendTo($('<div>', {
      'class': 'cb-dropdown-wrap'
    }).appendTo(column));
  }

  $('#example').DataTable({
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var ddmenu = cbDropdown($(column.header()))
          .on('change', ':checkbox', function() {
            var active;
            var vals = $(':checked', ddmenu).map(function(index, element) {
              active = true;
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();

            // Highlight the current item if selected.
            if (this.checked) {
              $(this).closest('li').addClass('active');
            } else {
              $(this).closest('li').removeClass('active');
            }

            // Highlight the current filter if selected.
            var active2 = ddmenu.parent().is('.active');
            if (active && !active2) {
              ddmenu.parent().addClass('active');
            } else if (!active && active2) {
              ddmenu.parent().removeClass('active');
            }
          });

        column.data().unique().sort().each(function(d, j) {
          var // wrapped
            $label = $('<label>'),
            $text = $('<span>', {
              text: d
            }),
            $cb = $('<input>', {
              type: 'checkbox',
              value: d
            });

          $text.appendTo($label);
          $cb.appendTo($label);

          ddmenu.append($('<li>').append($label));
        });
      });
    }
  });
});

CSS

/* Styles for the drop-down. Feel free to change the styles to suit your website. :-) */

.cb-dropdown-wrap {
  max-height: 80px; /* At most, around 3/4 visible items. */
  position: relative;
  height: 19px;
}

.cb-dropdown,
.cb-dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cb-dropdown {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #888;
}

/* For selected filter. */
.active .cb-dropdown {
  background: pink;
}

.cb-dropdown-wrap:hover .cb-dropdown {
  height: 80px;
  overflow: auto;
  transition: 0.2s height ease-in-out;
}

/* For selected items. */
.cb-dropdown li.active {
  background: #ff0;
}

.cb-dropdown li label {
  display: block;
  position: relative;
  cursor: pointer;
  line-height: 19px; /* Match height of .cb-dropdown-wrap */
}

.cb-dropdown li label > input {
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
}

.cb-dropdown li label > span {
  display: block;
  margin-left: 3px;
  margin-right: 20px; /* At least, width of the checkbox. */
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: normal;
  text-align: left;
}

/* This fixes the vertical aligning of the sorting icon. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-position: 100% 10px;
}

Demo

https://jsfiddle.net/41vgefnf/1/ https://jsfiddle.net/41vgefnf/6/ https://jsfiddle.net/41vgefnf/8/ https://jsfiddle.net/41vgefnf/9/ https://jsfiddle.net/41vgefnf/10/

UPDATE

I moved the filter dropdowns to the header, and styled the dropdowns to look more like dropdown menus. (No JS or jQuery involved in the dropdown functionality; just pure CSS with basic animation — CSS3 transition.)

UPDATE #2

Sorry, I forgot apply the CSS "active" class to selected items.

UPDATE #3

Same like Update #2 case, but for the dropdown menu wrapper. (Sorry for keep forgetting things.. and I edited just to conform/meet to the requirements/changes you've actually requested. :) But I think this update would be the final revision.)

UPDATE #4

Fixed the "active" state change of the dropdown menu wrapper.

CREDITS

Thank you @Giacomo for your Fiddle. =)

Checkbox in Filter drop-down, You need to change the select to be multiple , map all the selected option values and use the Regex or operator to search the column. Hope it  I have one drop down below the column of the data tables, i want to select multiple vales and once select those the search should work with these new values. I saw your answer here, but not sure how to map the selected drop down vale to the search function. Can you please help me out on this.

I think what you are searching for in user interface terms is a multiselect.

It doesn't actually exist a dropdown element with multiple selection using a checkbox (multiselect already exists for that kind of interaction need).

I think you need a custom multiselect with better user experience (not the default one like in example provided).

Here is a fiddle with my purpose, i understand that this is not exactly what you were asking for, but i pretty think this will suite your request at a more abstract level.

All i did is to use a jquery plugin called select2, very usefull to enhance ux and ui in various input elements.

Please check code comments for technicalities.

https://jsfiddle.net/p1261jby/3/

/*added as resources
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css
*/

$(document).ready(function() {
  $('#example').DataTable({
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        //added class "mymsel"
        var select = $('<select class="mymsel" multiple="multiple"><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function() {
            var vals = $('option:selected', this).map(function(index, element) {
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>')
        });
      });
      //select2 init for .mymsel class
      $(".mymsel").select2();
    }
  });
});

Here are Select2 docs in case you need to customize some parameters. https://select2.org/selections

Change jquery datatable column multi-filters to dropdowns with c, These filters have multi-selection and are currently displayed as 'select' the select containers with tidy, clean dropdowns with checkboxes. Filter datatable column using dropdown. Ask Question now i want to show same record in two different selection of filter drop down 1.Tokyo and 2. San Francisco.

Here's another flavour. It's using modified code from Elmahdi Mahmoud for the multi-select, so I've left in his MIT copyright message.

I'll warn you now, the code isn't pretty, but the result is effective, so I thought it worth adding to the pile of options. A live fiddle is here.

The JS is

    /* Plugin API method to determine is a column is sortable */
$.fn.dataTable.Api.register('column().searchable()', function() {
  var ctx = this.context[0];
  return ctx.aoColumns[this[0]].bSearchable;
});


$(document).ready(function() {
  // Create the DataTable
  var table = $('#example').DataTable({
    fixedHeader: true,
    pageLength: 25,
    orderCellsTop: true,
    columnDefs: [{
      searchable: false,
      targets: [0, 4]
    }],
  });

  // Add filtering
  table.columns().every(function() {
    if (this.searchable()) {
      var that = this;


      var myList = $('<ul/>');
      var myMulti = $('<div class="mutliSelect"/>');
      myList.appendTo(myMulti);

      var myDd = $('<dd/>');
      myMulti.appendTo(myDd);

      var myDropdown = $('<dl class="dropdown"/>');
      myDropdown.append('<dt><a href="#"><span class="hida">Select</span><p class="multiSel"></p></a></dt>');
      myDd.appendTo(myDropdown);

      myDropdown
        .appendTo(
          $('thead tr:eq(1) td').eq(this.index())
        )
        .on('change', function() {
          var vals = $(':checked', this).map(function(index, element) {
            return $.fn.dataTable.util.escapeRegex($(element).val());
          }).toArray().join('|');

          that
            .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
            .draw();
        });


      // Add data
      this
        .data()
        .sort()
        .unique()
        .each(function(d) {
          myList.append($('<li><input type="checkbox" value="' + d + '"/>' + d + '</option>'));
        });

    }
  });


  /*
    Dropdown with Multiple checkbox select with jQuery - May 27, 2013
    (c) 2013 @ElmahdiMahmoud
    license: https://www.opensource.org/licenses/mit-license.php
  */

  $(".dropdown dt a").on('click', function(e) {
    var dropdown = $(this).closest('.dropdown');
    dropdown.find('ul').slideToggle('fast');

    $('.dropdown').not(dropdown).find('ul').slideUp('fast');

  });

  $(".dropdown dd ul li a").on('click', function() {
    $(".dropdown dd ul").hide();
  });

  function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
  }

  $(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").slideUp('fast');

  });

  $('.multiSelect input[type="checkbox"]').on('click', function() {
    var title = $(this).closest('.multiSelect').find('input[type="checkbox"]').val(),
      title = $(this).val() + ",";

    if ($(this).is(':checked')) {
      var html = '<span title="' + title + '">' + title + '</span>';
      $('.multiSel').append(html);
      $(".hida").hide();
    } else {
      $('span[title="' + title + '"]').remove();
      var ret = $(".hida");
      $('.dropdown dt a').append(ret);

    }
  });


});

DataTable filter with SELECT MULTIPLE field · Issue #8546 · wet , DataTable filter with SELECT MULTIPLE field #8546. Open I haven't seen this done with a dropdown, but I seen it with checkboxes. A column can be shown with a checkbox that reflects the row's selected status simply through the use of the select-checkbox CSS class for that column (columns.className). Row selection can be restricted to that column using the select.selector option. The checkbox is not an <input type="checkbox"> element, but rather a CSS that uses the :before

Filter by multiple conditions / drop-downs using DataTables, Yes just create two dropdown. once you int your datatable. just add the script var table = table = $('#tableId').DataTable( {}); $('#firstDropdownId').on('change',  Select Multiple Rows With Checkboxes Using jQuery DataTable Code Tube Delete Multiple Rows With Select Checkboxes Using Ajax Datatables Individual column searching using PHP Ajax

jQuery DataTables: Row selection using checkboxes and Select , We will demonstrate universal solution on how to add a checkbox column to a table, allow multiple row selection and ability to select all rows  Filter by multiple conditions / drop-downs using DataTables - Table plug-in for jQuery (Two dropdowns and two-sided multi select lists) have not worked, so any

Create A Multi Select Dropdown Which Filters A DataTable , Create A Multi Select Dropdown Which Filters A DataTable. javascript type="​checkbox" id="cables" name="filterReportDD" data-column="2"  This is a follow-up article to jQuery DataTables – How to add a checkbox column describing a simple solution to add checkboxes to a table. However proposed solution worked for a table using client-side processing mode only. This article offers universal solution that would work both in client-side

Comments
  • Wow @sally-cj, that's impressive. The only thing left now is for the container to to work as a dropdown. You see I'll be putting the filters in the header, so I need them to contract when the filter is not in use. Is this possible with CSS alone?
  • While waiting for @Sally CJ to review my edit on his answer, here is a link to fiddle with my contribution: jsfiddle.net/xu58j5vh/7
  • Well done Giacomo. Perhaps could be made even smoother by moving the dropdowns to the header area ('header' in line 16 of fiddle) and in .cb-dropdown-wrap adding position: absolute, z-index = 1, and adjusting the background and top. I'll give until tomorrow to give Sally CJ a chance to come back before marking as the accepted answer. This was a tough one. Your help greatly appreciated.
  • @Sally CJ Edited again, here is again a link to fiddle with my contribution: jsfiddle.net/w8Lozex7/2
  • That is perfect!
  • Hey @Giacomo-Penuti. Thanks for responding. Technically I agree that using select2 works. The problem is that its operation and the way it looks is clunky and I'm under strict instructions to provide a 'very smooth' user experience using checkboxes on a dropdown. Is there an alternative custom multiselect that does use checkboxes instead?
  • You're wellcome. There is something i sometimes have to say to my clients and collegues: "What's wrost that reinvent the whell?Reinvent a square whell". I think that this exactly fits as what you are required to do. Select2 multiselect performance is fine. If it looks clunky and you want to improve ux, you can still work with some css and js for animation and better look.
  • If my 2 cents can't persuade you and your colleagues, please tell me and I will try to find a solution for that "checkboxes in dropdown" that theorically i think as checkboxes in a cosmetic dropdown or as a multiselect where options looks cosmetically like a checkbox.
  • I'm afraid they're really after checkbox dropdowns! All because of the number of clicks required to make multiple selections in one filter
  • This is like having waited for a bus for 5 years then suddenly 3 come at once! Thanks @Colin0117. Yes, it's effective. Suddenly checkbox filters on datatables are no longer the mystery they once were.
  • Ha, I didn't realise this was an old one, just looked interesting :)