एक खोज डेटा तालिका में 'selectAll' बटन का प्रयोग

Question

मैं इस तरह के डेटा की मेज होने आईडी उदाहरण प्रारंभ हो जाने के बाद दिखाई देने वाले सभी पंक्तियों का चयन -

var table = $("#example").DataTable({ 
    "aaSorting": [[4, "asc"]], 
    select: true, 
    dom: 'Bfrtip', 
    buttons: [ 
     'excelHtml5', 
     { 
      extend: 'pdfHtml5', 
      orientation: 'portrait', 
      pageSize: 'LEGAL' 
     }, 
     { 
      extend: 'print', 
      pageSize: 'LEGAL', 
      title: 'Visible rows' 
     }, 
     { 
      extend: 'selectAll', 
      className: 'selectall' 
     } 
    ], 
    language: { 
     buttons: { 
      selectAll: "Select all rows" 
     } 
    } 
}); 

की तुलना में मैं के बाद सभी पंक्तियों का चयन करने की कोशिश की है नीचे दिए गए कोड के साथ एक खोज जब selectAll बटन क्लिक किया -

table.on('search.dt', function (e) { 
    e.preventDefault(); 
    $(".selectall").click(function (e) { 
     e.preventDefault(); 
     var rows_after_search = table.rows({search: 'applied'}).nodes(); 
     rows_after_search.each(function() { 
      $(this).toggleClass('selected'); 
     }); 
    }); 
}); 

मैं एक तरह से इस के बाद खो रहा हूँ। selectAll अभी भी उस पृष्ठ पर सभी पंक्तियों का चयन कर रहा है।

विस्तृत करने के लिए, मान लीजिए कि डेटा-टेबल के वर्तमान पृष्ठ पर 10 पंक्तियां हैं। खोज के बाद यह 2 पंक्तियां दिखा रहा है। अब मैं 2 पंक्तियों का चयन करना चाहता हूं जबकि चयन करें सभी बटन क्लिक किया गया है।

Answer 1

मेरा मानना ​​है कि आपकी सामान्य समस्या यह है कि आप अचयनित (फ़िल्टर नहीं की गई) पंक्तियों को रीसेट नहीं कर रहे हैं। आप केवल फ़िल्टर किए गए पंक्तियों के लिए .selected को टॉगल कर रहे हैं, आखिरकार चयनित सभी पंक्तियों में समाप्त हो रहे हैं। साथ ही, मैं कोड को action विधि में रखूंगा, क्योंकि आप वास्तव में selectAll डिफ़ॉल्ट कार्यक्षमता को ओवरराइड कर रहे हैं।

{ 
    extend: 'selectAll', 
    className: 'selectall', 
    action : function(e) { 
    e.preventDefault(); 
    table.rows({ page: 'all'}).nodes().each(function() { 
     $(this).removeClass('selected') 
    }) 
    table.rows({ search: 'applied'}).nodes().each(function() { 
     $(this).addClass('selected');   
    }) 
    } 
} 

डेमो ->https://jsfiddle.net/sqmz7z76/

Answer 2

davidkonrad के कोड ज्यादातर सही है, लेकिन यह आधिकारिक विधियों का उपयोग कर नहीं है।

{ 
    extend: 'selectAll', 
    className: 'selectall', 
    action : function(e) { 
    e.preventDefault(); 
    table.rows({ search: 'applied'}).deselect(); 
    table.rows({ search: 'applied'}).select(); 
    } 
} 

के बजाय बस 'चुना' वर्ग टॉगल, यह ') का चयन करें (' विधि, जो बारी में, "सभी का चयन रद्द करें" बटन सक्षम बनाता है और पाद लेख प्रदर्शित करता है कहता है: यह सही कोड का उपयोग करने के लिए है पाठ आपको बता रहा है कि कितनी पंक्तियां चुनी गई हैं।