Search or filter a column in jquery datatable using multi select dropdown with checkbox

Question

I am trying to filter or search a column in jquery datatable using multiselect checkbox drop down. Suppose for example if it is a city column, the table should filter or search if I check two cites as per checkbox drop down and display the result for the checked cites in drop down. I tried lot of ways to find solution but, i couldn't crack it upto now. if anyone can help in solving this it is greatly appreciated. Thanks in advance. I am just putting jquery code below for your reference.

<head>
    <meta charset="utf-8">
    <title>jQuery Datatable</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

    <link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">

    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

    <script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

    <style>
        * {
            margin:0;
            padding: 0;
        }
        #wrap {
            width: 100%;
            margin: auto;
        }
        .addcolr {
            color: green;
        }
    </style>
    <script>
        /*$(document).ready(function() {
        $('#example th').each(function() {
            alert(this.textContent);
        });
    });*/
        $(document).ready(function() {
          $('#example').DataTable({

            "bFilter": true,
            initComplete: function () {
            this.api().columns(2).every( function () {
                var column = this;
                var select = $('<select id="sel_dropdown" multiple="multiple"><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() );
                    /*.on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

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

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

          });

          $('#example tbody tr td:nth-child(4)').each( function(){

            if($(this).text() == 61) {
                  $(this).css("color","red");
            }
            else if($(this).text() == 47) {
                  $(this).addClass("addcolr");
            }
           });

          //multiselect
          $('#sel_dropdown').multiselect();

          // $('#example').DataTable();

          $('#sel_dropdown').change( function () { 
                $('#example').DataTable().fnFilter( $('#sel_dropdown').val(),2);
            });

        } );
    </script>
</head>
<body>
<div id="wrap"></div></body>

R.Costa · Accepted Answer · 2017-01-20 16:30:09Z

5

You can achieve that with the Search API

It allows you to build a regular expression and then filter the desired column:

$('#table').DataTable().column(col).search(regex, true, true).draw();

I've coded a complete example for future reference:

JSFIDDLE

answered Jan 20, 2017 at 16:30

R.Costa

1,3939 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cccandy · Accepted Answer · 2017-09-01 08:22:55Z

0

If you use angularjs, you can try Smart table, it's super easy to use!:

<st-select-multiple collection="collection" predicate="education"></st-select-multiple>

answered Sep 1, 2017 at 8:22

cccandy

529 bronze badges

Collectives™ on Stack Overflow

Search or filter a column in jquery datatable using multi select dropdown with checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related