Datatable bir düğme tıklatma olayına göre satırları gizle ve göster

Question

Bu nedenle, bir kez dinamik olarak php tarafından oluşturulan bu veri tabanına sahibim. Ama bir kez yüklendiğinde, tüm tabloyu yeniden yüklemek istemiyorum çünkü yaptığım bir açıklamada sadece küçük bir javascript var. Düğmeye bastığınızda, tr sayfamdaki bir veri özelliğini karşılaştırırım. Eğer uymuyorsa, onları saklamak istiyorum, onlara göstermek isterim. İşte bu yüzden şimdiye kadar denedim.

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

Döngü Symfony'de 2 yapılır HTML (bunu anlamak yoksa, Twig Şablon Kullanarak gerçekten önemi yok) anlaman gereken tek şey olduğunu "verilere nitelik -user "PHP tarafından oluşturuldu ve veritabanımın her girişi bu döngüde gidiyor.

Sonra jQuery bu var:

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

Çok iyi çalışıyor. Tek sorun, DataTable'ın "kendisini değiştirmesi" değil. Örneğin, 25 sayfa varsa, 25 sayfa tutar ve "sonraki tablo sayfası" düğmesine bastığınızda, "tablo sayfası" nı yeniler ve artık şeyler gizlenmez. Çok arandım ama bir yol bulamadım. Bunun için ajax kullanmak istemiyorum, çünkü sadece bir kez değer ile doldurulmalı ve daha sonra aktif olana veya düğmenin etkin olmamasına bağlı olarak gizlenmeli veya gösterilmeli ... Bu jQuery kullanılarak bile mümkün mü? Eklenti ?

Şimdiden teşekkürler.

Answer 1

Evet, bu gerçekten mümkün, ancak farklı bir yaklaşıma ihtiyacınız olacak. DataTable'lar DOM'da orijinal <table> öğesinde yapılan değişikliklerin farkında olmadığından, jQuery ile satırların gizlenmesi ve dataTable'ların kendisiyle gizlenmesi genellikle kötü bir fikirdir. "Bir yerde kod-başka-bir-komut-bir-gizli-bir-satır" -event dataTable içine kanca olabilir. Bu yüzden dataTables değişiklikleri "unutmak" gibi görünüyor, sadece bu değişikliklerin farkında değil ve dataTables iç organları el değmeden kalıyor. Bu nedenle, custom filter kullanın. Aşağıdaki küçük parça kodu istediğinizi yapar - 5'dan farklı tüm satırları data-user özniteliğine saklar. Sıralama ve sayfalandırma üzerinde çalışır. Son kod parçası, sıfırlama düğmesine bir örnektir.

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