DataTables

by amkrtchyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<div class="row">
  <div class="col s12">
    <div class="card z-depth-3 hoverable">
      <div class="card-title">
           <div class="row" style="margin-bottom: 0;">
             <div class="col s12 m4">
               <h5>Summary</h5>
             </div>
             <div class="col s12 m3 right-align">
               <span style="font-size:18px;font-weight:500;" multiple="true">Office:                </span>
               <select multiple="true" id="officeFltr">
               </select>
             </div>
             <div class="col s6 m3">
               <span style="font-size:18px;font-weight:500;">Age:</span>
               <select id="ageFltr" multiple="true"></select>
             </div>
         </div>
      </div>
      <div class="card-action">
        <div class="summTblDiv">
              <table id="example" class="display" cellspacing="0" width="100%">
                  <thead>
                      <tr>
                          <th>Name</th>
                          <th>Position</th>
                          <th>Office</th>
                          <th>Age</th>
                          <th>Start date</th>
                          <th>Salary</th>
                      </tr>
                  </thead>
                  <tfoot>
                      <tr>
                          <th>Name</th>
                          <th>Position</th>
                          <th>Office</th>
                          <th>Age</th>
                          <th>Start date</th>
   ...

JavaScript

$(document).ready(function (){
    var table = $('#example').DataTable({
       dom: 'lrtip',
        initComplete: function () {
          this.api().columns([2]).every( function () {
            var column = this;
            console.log(column);
            var select = $("#officeFltr"); 
            column.data().unique().sort().each( function ( d, j ) {
              select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
          } );
           this.api().columns([3]).every( function () {
            var column = this;
            console.log(column);
            var select = $("#ageFltr"); 
            column.data().unique().sort().each( function ( d, j ) {
              select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
          } );
          $("#officeFltr,#ageFltr").material_select();
       }
    });
    
    $('#officeFltr').on('change', function(){
    	var search = [];
      
      $.each($('#officeFltr option:selected'), function(){
      		search.push($(this).val());
      });
      
      search = search.join('|');
      
      console.log('search', search)
      table.column(2).search(search, true, false).draw();  
    });
    
    $('#ageFltr').on('change', function(){
    	var search = [];
      
      $.each($('#ageFltr option:selected'), function(){
      		search.push($(this).val());
      });
      
      search = search.join('|');
      table.column(3).search(search, true, false).draw();
    });
});