File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Col1</th>
            <th class='select-filter'>Col2</th>
            <th class='select-filter'>Col3</th>
            <th class='select-filter'>Col4</th>
            <th class='select-filter'>Col5</th>
            <th class='select-filter'>Col6</th>
            <th class='select-filter'>Col6</th>
​
          </tr>
        </thead>
​
​
​
        <tbody>
          <tr>
            <td>Fixed0</td>
            <td >Dallas</td>
            <td id="select-filter">Atlanta</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
          </tr>
          <tr>
            <td>Fixed1</td>
            <td id="select-filter">Dallas</td>
            <td id="select-filter">Atlanta</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
          </tr>
          <tr>
            <td>Fixed2</td>
            <td id="select-filter">Dallas</td>
            <td id="select-filter">Atlanta</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
          </tr>
          <tr>
            <td >Fixed3</td>
            <td id="select-filter">Dallas</td>
            <td id="select-filter">Atlanta</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
          </tr>
          <tr>
            <td>Fixed4</td>
            <td id="select-filter">Dallas</td>
            <td id="select-filter">Atlanta</td>
            <td id="select-filter"> Kansas City</td>
            <td id="select-filter">New York</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
          </tr>
          <tr>
            <td>Fixed5</td>
            <td id="select-filter">Dallas</td>
            <td id="select-filter">Atlanta</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
          </tr>
          <tr>
            <td>Fixed6</td>
            <td id="select-filter">Dallas</td>
            <td id="select-filter">Atlanta</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
            <td id="select-filter">Kansas City</td>
            <td id="select-filter">New York</td>
          </tr>
​
        </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
​
JavaScriptSaved
 
$(document).ready( function () {
var table = $('#example').DataTable(
   {
      fixedColumns:   
      {
         leftColumns: 1
      },
​
      scrollX: true,
      scrollY: '80vh',
      scrollCollapse: true,
​
      responsive: true,
      autoWidth : true, 
      paging: false,
      info: false,
      "searching": true,           
      "ordering": false, //Turn off ordering of records ABC
         language: 
      {
         search: '<i class="fa fa-search w3-text-grey"></i>',
         searchPlaceholder: "Rechercher",
         className: 'format-button w3-tiny w3-text-light-grey'
      }
​
      
   });
  
    // Remove the DT event and create our own
    $('.dataTables_filter input')
      .off()
      .on( 'keyup', function () {
      
      var val = $(this).val();
      
      
      if ( val.length ) {  // Perform search if there is a value
      
        // Create case insensitive regex expression
        var regex = new RegExp(val,"gi");
      
        // Loop through all Columns
        table.columns().every( function () {  
 //I tried this : 
 //         table.columns('.select-filter').every( function () {  
  
          // Check for matches in the column
          var matchCount = this.row(0).data()
                            .filter(function (value, index ) {
                              return value.match(regex) ? true : false;
                            } )
                            .count();
        
          // If matchCount > 0 show column
          if ( matchCount > 0 ) {
            this.visible( true );
          } else { 
            this.visible( false );  // Otherwise hide column
          }
        
        
        } );
      } else {  // If input empty show all columns
        table.columns().visible(true);  
      }
​
    } );
​
} );
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers