title: Datatable hide and show rows based on a button click event
body: <p>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.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div style="margin: 30px 0;"&gt;
          &lt;button class="btn btn-primary" id="myClientButton"&gt;Voir mes clients seulements&lt;/button&gt;
      &lt;/div&gt;
      &lt;table id="advancedSearchTable"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Phone&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;th&gt;Subject&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Profile&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {% for entity in entities %}
                  &lt;tr data-user="{{ entity.user.id }}" class="values"&gt;
                      &lt;td&gt;{{ entity }}&lt;/td&gt;
                      &lt;td&gt;{{ entity.mainphone }}&lt;/td&gt;
                      &lt;td&gt;{{ entity.email }}&lt;/td&gt;
                      &lt;td&gt;{{ entity.tagline }}&lt;/td&gt;
                      &lt;td&gt;{{ entity.createdDate|date('d-m-Y') }}&lt;/td&gt;
                      &lt;td&gt;&lt;a href="{{ path('clients_show', {id: entity.id}) }}" class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              {% endfor %}
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Then, in jQuery I have this:</p>
  
  <pre><code>&lt;script&gt;
  $('#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();
              }
          });
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>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 ?</p>
  
  <p>Thanks in advance.</p>