बटन पर क्लिक करने योग्य डेटा छुपाएं और शो पर क्लिक करें

Question

तो मेरे पास यह डेटाटेबल है जो एक बार गतिशील रूप से PHP द्वारा उत्पन्न होता है। लेकिन एक बार यह लोड होने के बाद, मैं पूरी तालिका को फिर से लोड नहीं करना चाहता क्योंकि चूंकि मैं जो कथन कर रहा हूं, वहां केवल एक छोटा जावास्क्रिप्ट है। जब आप बटन दबाते हैं, तो मैं अपने tr पर मौजूद डेटा विशेषता की तुलना करता हूं। अगर यह फिट नहीं होता है, तो मैं उन्हें छिपाना चाहता हूं, अन्यथा, मैं उन्हें दिखाना चाहता हूं। तो यहां मैंने अभी तक कोशिश की है।

एचटीएमएल

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

लूप Symfony 2 में किया जाता है (, टहनी टेम्पलेट का उपयोग कर यदि आप इसे समझ में नहीं आता यह वास्तव में नहीं बात करता है) आप सभी को समझना होगा यह है कि "डेटा पर विशेषता -user "PHP द्वारा बनाया गया है और यह कि मेरे डेटाबेस की हर प्रविष्टि इस लूप में जा रही है।

फिर, jQuery में मैं इस है:

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

यह बहुत अच्छी तरह काम करता है। एकमात्र समस्या यह है कि डेटाटेबल तब "खुद को बदलना" नहीं है। इसलिए, उदाहरण के लिए, यदि इसमें 25 पेज हैं, तो यह 25 पृष्ठों को रखता है और जब आप "अगला टेबल पेज" बटन दबाते हैं, तो यह "टेबल पेज" को रीफ्रेश करता है और चीजें अब छिपी नहीं जाती हैं। मैंने बहुत खोज की लेकिन मुझे कोई रास्ता नहीं मिला। मैं वास्तव में इसके लिए AJAX का उपयोग नहीं करना चाहता, क्योंकि इसे केवल मूल्य के साथ भरने की आवश्यकता है और फिर इसे केवल सक्रिय होने के बटन को छिपाने या दिखाने के लिए ही होगा ... क्या यह jQuery का उपयोग करना भी संभव है लगाना ?

अग्रिम धन्यवाद।

Answer 1

हां, यह वास्तव में संभव है, लेकिन आपको एक अलग दृष्टिकोण की आवश्यकता होगी। JQuery के साथ छिपाने वाली पंक्तियां और डेटा के माध्यम से नहीं, डेटा आमतौर पर एक बुरा विचार है, क्योंकि डेटाटेबल को DOM में मूल <table> तत्व में किए गए परिवर्तनों से अवगत नहीं है। कोई "कहीं-इन-कोड-एक-स्क्रिप्ट-है-छुपा-ए-पंक्ति" नहीं है- डेटा डेटाटेबल हुक कर सकते हैं। Thats क्यों डेटाटेबल परिवर्तनों को भूल जाते हैं, यह केवल उन परिवर्तनों से अवगत नहीं है, और डेटाटेबल्स आंतरिक अनचाहे रहते हैं।

तो इसके बजाय custom filter का उपयोग करें। कोड का निम्नलिखित छोटा टुकड़ा जो आप चाहते हैं - विशेषता वाले सभी पंक्तियों को छिपाना 5 से अलग विशेषता है। यह सॉर्टिंग और पेजिनेशन में काम करता है। कोड का अंतिम भाग रीसेट-बटन का एक उदाहरण है।

$("#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(); 
}); 

डेमो ->http://jsfiddle.net/d5hre2ux/