jQuery toggleClass example

Toggle class name on click in jQuery

by Cardscale

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table name="item" id="item" class="display" width="100%" cellspacing="0">
  <thead>
           <tr>
               <th>id</th>
               <th>Name</th>
               <th>Position</th>
               <th>Office</th>
               <th>Age</th>
               <th>Start date</th>
               <th>Salary</th>
           </tr>
       </thead>
       <tfoot>
           <tr>
               <th class="filterhead">id</th>
               <th class="filterhead">Empty</th>
               <th class="filterhead">Position</th>
               <th class="filterhead">Office</th>
               <th class="filterhead">Age</th>
               <th class="filterhead">Start date</th>
               <th class="filterhead">Salary</th>
           </tr>
       </tfoot>
       <tbody>
           <tr>
               <td>1</td>
               <td>Tiger Nixon</td>
               <td>System Architect</td>
               <td>Edinburgh</td>
               <td>61</td>
               <td>2011/04/25</td>
               <td>$320,800</td>
           </tr>
           <tr>
               <td>2</td>
               <td>Garrett Winters</td>
               <td>Accountant</td>
               <td>Tokyo</td>
               <td>63</td>
               <td>2011/07/25</td>
               <td>$170,750</td>
           </tr>
           <tr>
               <td>3</td>
               <td>Ashton Cox</td>
               <td>Junior Technical Author</td>
               <td>San Francisco</td>
               <td>66</td>
               <td>2009/01/12</td>
               <td>$86,000</td>
           </tr>
           <tr>
               <td>4</td>
               <td>Cedric Kelly</td>
               <td>Senior Javascript Developer</td>
               <td>Edinburgh</td>
           ...

CSS

tfoot {
    display: table-header-group;
}

JavaScript

// Setup - add a text input to each footer cell
 
// DataTable
 var otable = $('#item').DataTable({
		initComplete: function () {
          var api = this.api();
            $('.filterhead', api.table().footer()).each( function (i) {
              
              var column = api.column(i);
              
                var select = $('<select><option value=""></option></select>')
                .appendTo( $(this).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>' );
                } );
           
           } );
        
        }
 });