Getting DataTables to not filter certain rows

Question

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:

We click the checkbox for say, two users
We begin to filter for a user that is not checked
The two checked users will stay in the table, as well as the user that was filtered for.

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?

You should be able to use the DataTables API search function, which can accept a regex. Then you could write the regex to look for the search value except ones that have a checked checkbox. Haven't tried it, but it should be doable — Reverend Pete
– Reverend Pete, Commented Aug 2, 2019 at 19:23

Yevhen Horbunkov · Accepted Answer · 2019-08-03 09:46:15Z

1

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.

answered Aug 3, 2019 at 9:46

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jertyu Over a year ago

Thank you so much! After some time to fit it into our project, it works like a charm.

tuhin47 · Accepted Answer · 2019-08-03 10:38:45Z

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>

Collectives™ on Stack Overflow

Getting DataTables to not filter certain rows

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related