Datatable nascondere e mostrare le righe in base a un evento click del pulsante

Question

Quindi ho questo datatable generato dinamicamente da php una volta. Ma una volta caricato, non voglio ricaricare l'intero tavolo poiché c'è solo un piccolo javascript se l'affermazione che sto facendo. Quando si preme il pulsante, confronto un attributo di dati che si trova sul mio tr. Se non va bene, mi piacerebbe nasconderli, altrimenti mi piacerebbe mostrarli. Quindi ecco cosa ho provato finora.

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 è realizzato in Symfony 2 (Usando Ramoscello Template, se non si capisce che non importa) tutto ciò che dovete capire è che l'attributo "Dati -user "è creato da PHP e ogni voce del mio database sta andando in questo ciclo.

Poi, in jQuery ho questo:

<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> 

funziona molto bene. L'unico problema è che DataTable non sta "sostituendosi". Ad esempio, se ha 25 pagine, mantiene 25 pagine e quando si preme il pulsante "next table page", si aggiorna la "table page" e le cose non sono più nascoste. Ho cercato molto ma non ho trovato il modo. Non voglio davvero usare ajax per questo, dal momento che deve essere riempito solo una volta con valore e quindi dovrà solo essere nascosto o mostrato a seconda del pulsante attivo o meno ... È anche possibile usare questo jQuery collegare ?

Grazie in anticipo.

Answer 1

Sì, è effettivamente possibile, ma è necessario un approccio diverso. Nascondere le righe con jQuery e non tramite dataTables è in genere una cattiva idea, poiché dataTables non è a conoscenza delle modifiche apportate all'elemento <table> originale in DOM. Non ci sono dati "da qualche parte nel codice, un altro-script-nascosto-a-fila", i dati possono essere collegati. Ecco perché dataTables sembra "dimenticare" le modifiche, semplicemente non è a conoscenza di tali cambiamenti e gli interni dei dataTables rimangono intatti.

Quindi utilizzare un custom filter. Il seguente piccolo pezzo di codice fa quello che vuoi: nascondere tutte le righe con un attributo data-user diverso da 5. Funziona attraverso l'ordinamento e l'impaginazione. L'ultimo pezzo di codice è un esempio di un pulsante di ripristino.

$("#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/