Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
  <title>JS Bin</title>
</head>
<body> 
 <table id="example" class="table table-striped">
   <thead>
     <tr>
       <th>Name</th>
       <th>Position</th>
       <th>Office</th>
       <th>Age</th>
       <th>Start date</th>
       <th>Salary</th>
     </tr>
     <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
   </thead>
   <tbody>
     <tr>
       <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>Garrett Winters</td>
       <td>Accountant</td>
       <td>Tokyo</td>
       <td>63</td>
       <td>2011-07-25</td>
       <td>$170,750</td>
     </tr>
     <tr>
       <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>Cedric Kelly</td>
       <td>Senior Javascript Developer</td>
       <td>Edinburgh</td>
       <td>22</td>
       <td>2012-03-29</td>
       <td>$433,060</td>
     </tr>
     <tr>
       <td>Airi Satou</td>
       <td>Accountant</td>
       <td>Tokyo</td>
       <td>33</td>
       <td>2008-11-28</td>
       <td>$162,700</td>
     </tr>
     <tr>
       <td>Brielle Williamson</td>
       <td>Integration Specialist</td>
       <td>New York</td>
       <td>61</td>
       <td>2012-12-02</td>
       <td>$372,000</td>
     </tr>
   </tbody>
  </table>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
​
</body>
</html>
</body>
</html>
 
​
 
  $('#example').DataTable({
  orderCellsTop: true,
  stateSave: true,
  initComplete: function () {
    this.api()
      .columns([1,2])
      .every(function () {
      var column = this;
      var select = $('<select class="form-control form-control--filter"><option value=""> -- Filter -- </option></select>')
      .appendTo($('thead tr:eq(1) td:eq(' + this.index() + ')'))
      .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) {
        if (!d == '') {
          select.append('<option value="' + d + '">' + d + '</option>');
        }
      });
    });
  },
    stateLoadParams: function (settings, data) {
      for (i = 0; i < data.columns["length"]; i++) {
        var col_search_val = data.columns[i].search.search;
​
        if (col_search_val != "") {
          var filterColumn = $("#example thead tr:eq(1) td:eq(" + i + ") select");
          console.log(filterColumn, i);
        }
      }
    }
​
​
});
​
var abc = $("#example thead tr:eq(1) td:eq(1) select");
​
//console.log(abc);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers