Datatable hide and show rows based on a button click event

Question

So I have this datatable that is generated by php dynamically once. But once it's loaded, I don't want to reload the whole table since there's only a small javascript if statement that I am doing. When you press the button, I compare a data attribute that is on my tr. If it doesn't fit, I'd like to hide them, else, I'd like to show them. So here is what I tried so far.

HTML

    <div style="margin: 30px 0;">
        <button class="btn btn-primary" id="myClientButton">Voir mes clients seulements</button>
    </div>
    <table id="advancedSearchTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Subject</th>
                <th>Date</th>
                <th>Profile</th>
            </tr>
        </thead>
        <tbody>
            {% for entity in entities %}
                <tr data-user="{{ entity.user.id }}" class="values">
                    <td>{{ entity }}</td>
                    <td>{{ entity.mainphone }}</td>
                    <td>{{ entity.email }}</td>
                    <td>{{ entity.tagline }}</td>
                    <td>{{ entity.createdDate|date('d-m-Y') }}</td>
                    <td><a href="{{ path('clients_show', {id: entity.id}) }}" class="btn btn-success"><span class="glyphicon glyphicon-eye-open"></span></a></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

The Loop is made in Symfony 2 (Using Twig Template, if you don't understand it it doesn't really matter) all you have to understand is that the attribute on "data-user" is created by PHP and that every entry of my database is going in this loop.

Then, in jQuery I have this:

<script>
$('#advancedSearchTable').DataTable(
    {
        "language": {
              "url": "//cdn.datatables.net/plug-   ins/9dcbecd42ad/i18n/French.json"
                    },
               responsive: true
            });
  $('#myClientButton').on('click', function(){
    if ($(this).hasClass('active')){
        $(this).removeClass('active');
        $('tr.values').show();
    }
    else{
        $(this).addClass('active');
        $('tr.values').each(function(){
            if ($(this).attr('data-user') != 5){
                $(this).hide();
            }
        });
    }
});
</script>

It works very well. The only problem is that the DataTable then is not "replacing itself". So, for example, if it has 25 pages, it keeps 25 pages and when you press on the "next table page" button, it refreshes the "table page" and things are not hidden anymore. I searched alot but I couldn't find a way. I really don't want to use ajax for this, since it only need to be filled once with value and then it will only have to hide or show depending on the button being active or not... Is it even possible using this jQuery plugin ?

Thanks in advance.

Answer 1

Yes, it is indeed possible, but you will need a different approach. Hiding rows with jQuery and not through dataTables itself is generally a bad idea, since dataTables is not aware of changes made to the original <table> element in DOM. There is no "somewhere-in-code-another-script-has-hidden-a-row"-event dataTables can hook into. That is why dataTables seems to "forget" changes, it is simply not aware of those changes, and the dataTables internals stay untouched.

So use a custom filter instead. The following small piece of code does what you want - hiding all rows having a data-user attribute different than 5. It works across sorting and pagination. The last piece of code is an example of a reset-button.

$("#hide").click(function() {
    $.fn.dataTable.ext.search.push(
       function(settings, data, dataIndex) {
          return $(table.row(dataIndex).node()).attr('data-user') == 5;
       }
    );
    table.draw();
});    
$("#reset").click(function() {
    $.fn.dataTable.ext.search.pop();
    table.draw();
});

demo -> http://jsfiddle.net/d5hre2ux/

Answer 2

According to this https://datatables.net/examples/plug-ins/range_filtering.html it is possible to use data parameter to filter by any value shown on the table.

$("button").click(function() {
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) {
          return data[3] != "63";
        }
    );
    table.draw();
});