CODEWITHSUNDEEP
javascriptjquerydatatables
Jertyu
Jertyu

Reputation: 115

Getting DataTables to not filter certain rows

Currently, our generic DataTables integration allows us to filter for Users, Items, etc.

In the case of our User table, we have a column with a checkbox. When this checkbox is clicked, the User should ignore any table filtering.

Here's what we have in mind:

I wrote an implementation that simply appends the row back into the DOM if it's checked and not present, but it's pretty hacky. I would prefer an implementation that used tools offered by DataTables itself.

Does anyone have any idea how to do this?

Upvotes: 0

Views: 923

Answers (2)

tuhin47
tuhin47

Reputation: 6058

Try to solve the problem. Here is the solution.

$(document).ready(function() {
  var dataTable = $('#example').dataTable();
  dataTable.on('search.dt', function() {

    $('.dataTables_filter input').unbind().keyup(function(e) {
      var value = $(this).val();
      value = 'true|' + value
      //console.log(value);
      dataTable.fnFilter(value, null, true, false, true, true);
    })


  });
  $('table').find('tr').on('change', function(event) {
    //console.log($(this).index());
    //console.log(event.target.checked);
    if (event.target.checked) {
      $(event.target).attr('checked', 'checked');
      $(event.target).parent().append('<div id="true" hidden>true</div>');
    } else {
      $(event.target).removeAttr('checked');
      $(event.target).parent().find('div').remove("#haha");


    }
    //reload a specific row 
    // dataTable.api().row($(this).index()).invalidate().draw();
    //reload all row
    dataTable.api().rows().invalidate().draw();

  })





})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">

<style>
  thead input {
    width: 100%;
  }
</style>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>checkbox</th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" /></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><input type="checkbox" /></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><input type="checkbox" /></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><input type="checkbox" /></td>
      <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><input type="checkbox" /></td>
      <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><input type="checkbox" /></td>
      <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>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

Upvotes: 0

Yevhen Horbunkov
Yevhen Horbunkov

Reputation: 15530

If the idea is to make rows with checked checkboxes persistent upon searching, you may implement your custom searchbar with searching plugin that would filter rows depending on whether it contains searched text or has checked checkbox within the row node:

$.fn.dataTable.ext.search.push((_,__,rowIdx,dataObj) => Object.values(dataObj).some(cellData => cellData.toLowerCase().includes($('#searchbar').val().toLowerCase())) || $(dataTable.row(rowIdx).node()).is(':has(:checked)'));

Complete DEMO of this concept you might find over here.

Upvotes: 1

Related Questions