CODEWITHSUNDEEP
jquerytwitter-bootstrapdatatables
peace_love
peace_love

Reputation: 6471

How can I use a custom filter with horizontally scrollable bootstrap DataTable?

I am using the horizontal scrollable bootstrap data tables and created a custom filter.

When I select a specific value of my select box, I want to show only columns with that specific class. It is all working well, my only problem is:

The selected columns don't fit visually into my window, that means, they have the same width than my table with all the columns, even if the result is only one column. They are also kind of offset.. I created an example here:

$('.data-table').DataTable({
  "scrollX": true,
  initComplete: function () {
    $('<div style="float:right;min-width:200px"><div style="float:right;"><select name="productgroup" class="productgroup form-control select2" style="width: 100%;"><option value="all">All</option><option value="name">Name</option><option value="position">Position</option><option value="office">Office</option><option value="age">Age</option><option value="startdate">Startdate</option><option value="salary">Salary</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>').appendTo($("#DataTables_Table_0_filter"));
    $("select").on("change", function () {
      var product = $(this).val();
      $(".all").hide();
      $("." + product).show();
    });
  }
});
div.dataTables_wrapper {
  width: 100%;
  margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">

<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>
<table class="data-table table table-bordered table-striped">
  <thead>
    <tr>
      <th class="all name">Name</th>
      <th class="all position">Position 1</th>
      <th class="all position">Position 2</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Something else</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="all name">Tiger Nixon</td>
      <td class="all position">System Architect</td>
      <td class="all position">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
    </tr>
    <tr>
      <td class="all name">Garrett Winters</td>
      <td class="all position">Accountant</td>
      <td class="all position">Tokyo</td>
      <td class="all">63</td>
      <td class="all">2011/07/25</td>
      <td class="all">$170,750</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
    </tr>
    <tr>
      <td class="all name">Ashton Cox</td>
      <td class="all position">Junior Technical Author</td>
      <td class="all position">San Francisco</td>
      <td class="all">66</td>
      <td class="all">2009/01/12</td>
      <td class="all">$86,000</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">Edinburgh</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 976

Answers (2)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

There are lot of bad practice in your code. Let me point out them

  • You have class names in all the td elements in the tbody- Classes to the header is sufficient. (you will see why in my below code)
  • You are appending the dropdown to the table in the initComplete callback to a element that is dynamically created by the plugin ('#DataTables_Table_0_filter'), which is not the recommended approach by the plugin author. - If you want to manipulate the Table UI you must use the plugin provided dom option.
  • You are manually hiding all the headers and the td cells in the body for the change event. This will again have issues when you page, change disply length as the plugin is not aware of this change and it will redraw the table as per its previous configuration - You need to manipulate the table by using the plugin provided methods. column.visible( ) ,The parameters that can be passed into the columns() api details
  • Also there is a bug in your code already which you can see if you change the display length - Again this is because of the way you are using the plugin. (below example fixes it)

So given these information, I have changed your code to the best possible way. 

var yourTableObj = $('.data-table').DataTable({
 "dom": "<'row'<'col-sm-4'l><'col-sm-4'f><'col-sm-4 customFilterHolder'>>" +
 "<'row'<'col-sm-12'tr>>" +
 "<'row'<'col-sm-5'i><'col-sm-7'p>>",
 "scrollX": true,    
  initComplete: function(){
      $(".customFilterHolder").html('<div style="float:right;min-width:200px"><div style="float:right;"><select name="productgroup" class="productgroup form-control select2" style="width: 100%;"><option value="all">All</option><option value="name">Name</option><option value="position">Position</option><option value="office">Office</option><option value="age">Age</option><option value="startdate">Startdate</option><option value="salary">Salary</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>');      

      $('.productgroup').on('change',function(){
          yourTableObj.columns().visible(true); //reset table to show all columns
          yourTableObj.columns(':not(.'+$(this).val()+')').visible(false);  // now hide unwanted columns.
         // the reset is important because if you dont the table will work the present state of the table. 
      });    
   }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">

<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>

<table class="data-table table table-bordered table-striped">
  <thead>
    <tr>
      <th class="all name">Name</th>
      <th class="all position">Position 1</th>
      <th class="all position">Position 2</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Something else</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
    </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>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</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>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</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>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>Edinburgh</td>
      <td>Edinburgh</td>
      <td>61</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

philantrovert
philantrovert

Reputation: 10092

You can use columns.adjust() though I'm not sure if this is the desired result but it does adjust the columns accordingly.

$('.data-table').DataTable({
  "scrollX": true,
  initComplete: function(settings) {
    $('<div style="float:right;min-width:200px"><div style="float:right;"><select name="productgroup" class="productgroup form-control select2" style="width: 100%;"><option value="all">All</option><option value="name">Name</option><option value="position">Position</option><option value="office">Office</option><option value="age">Age</option><option value="startdate">Startdate</option><option value="salary">Salary</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>').appendTo($("#DataTables_Table_0_filter"));
    $("select").on("change", function() {
      var product = $(this).val();
      $(".all").hide();
      $("." + product).show();
      var api = new $.fn.dataTable.Api(settings);
      api.columns.adjust().draw();
    });

  }
});
div.dataTables_wrapper {
  width: 100%;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">

<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>

<table class="data-table table table-bordered table-striped">
  <thead>
    <tr>
      <th class="all name">Name</th>
      <th class="all position">Position 1</th>
      <th class="all position">Position 2</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Something else</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="all name">Tiger Nixon</td>
      <td class="all position">System Architect</td>
      <td class="all position">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
    </tr>
    <tr>
      <td class="all name">Garrett Winters</td>
      <td class="all position">Accountant</td>
      <td class="all position">Tokyo</td>
      <td class="all">63</td>
      <td class="all">2011/07/25</td>
      <td class="all">$170,750</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
    </tr>
    <tr>
      <td class="all name">Ashton Cox</td>
      <td class="all position">Junior Technical Author</td>
      <td class="all position">San Francisco</td>
      <td class="all">66</td>
      <td class="all">2009/01/12</td>
      <td class="all">$86,000</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">Edinburgh</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions