kiểm tra tất cả các hộp kiểm trong DataTable bao gồm các hàng ẩn

Question

Tôi đang cố gắng thực hiện một chức năng kiểm tra tất cả các hộp kiểm trong DataTable, bao gồm cả các hàng ẩn. Dưới đây là đoạn code html cho cột "checkbox":

<div class="usersTable" id="userTable"> 
    <table cellpadding="0" cellspacing="0" id="customersList" > 
     <thead> 
      <tr> 
       <th><input type="checkbox" name="selectall" id="selectall" class="selectall"/></th> 
       <th width="200">val1</th> 
       <th width="80px">val2</th> 
       <th width="70px">val3</th> 
       <th width="450">val4</th> 
       <th width="60px">val5</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

nút Submit:

<input type='button' value='select all' id='selectallboxes' name='selectallboxes' /> 

Và mã JQuery đó không làm việc:

$(function() {   
    otable = $('#customersList').dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "aLengthMenu" : [ [10,20,50,100,1000], [10,20,50,100,1000] ], 
     "iDisplayLength": 100, 
     "bProcessing": true, 
     "bServerSide": true, 
     "aaSorting":[],   
     "iDisplayStart": 0, 
     "sAjaxSource": "filename", 
     .... 

$("#selectallboxes").click (function() { 
     alert(dt.fnGetNodes().length + ' is total number') 
     var selected = new Array(); 
     $('input', dt.fnGetNodes()).each(function() { 
       $(this).attr('checked','checked'); 
       selected.push($(this).val());      
     }); 
     // convert to a string 
     var mystring = selected.length; 
     alert(mystring); 
}) 

Answer 1

Ok, vì vậy đây phải là những gì bạn đang theo dõi, điều này sẽ tìm tất cả trang hiện tại của <tr> và chuyển qua chúng bằng cách sử dụng dataTables _ API. Bạn có thể thay đổi bộ lọc cho phù hợp với nhu cầu của bạn để chọn các hàng khác nhau nếu bạn muốn, đây là tất cả các tài liệu trong tài liệu datatables.

$("#selectallboxes").click (function() 
{ 
    var selected = new Array(); 

    // Use the _ function instead to filter the rows to the visible 
    var data = oTable._('tr', {"filter":"applied"}); 

    $.each(data, function(key, index) 
    { 
     var input = $(this).find('input[type="checkbox"]'); 

     input.attr('checked', 'checked'); 

     selected.push(input.val()); 
    }); 

    // convert to a string 
    var mystring = selected.length; 

    alert(mystring); 
}); 

Answer 2

Hãy thử:

$("#selectallboxes").click(function() { 
    var selected = new Array(); 
    $(otable.fnGetNodes()).find(':checkbox').each(function() { 
     $this = $(this); 
     $this.attr('checked', 'checked'); 
     selected.push($this.val()); 
    }); 
    // convert to a string 
    var mystring = selected.join(); 
    alert(mystring); 
}); 

.length mang đến cho bạn độ dài của mảng. Tôi đã sử dụng join() để tham gia mảng thành chuỗi. .fnGetNodes() của DataTable cung cấp cho bạn tất cả các hàng trong bảng bao gồm cả các hàng ẩn.

Answer 3

Hãy thử một cái gì đó giống như

$("#selectallboxes").click (function() { 
    var selected = []; 
    $('input:checkbox', otable).each(function() { 
     selected.push($(this).prop('checked', true).val());      
    }); 
    // convert to a string 
    alert(selected.join()); 
}) 

Answer 4

fnGetNodes() sẽ cung cấp chỉ có các hàng có thể nhìn thấy, có một phần mở rộng để có được những hàng ẩn do fnGetHiddenNodes pagination(), nhưng điều đó sẽ làm việc với jquery phiên bản DataTable 1,9, có bản cập nhật cho cùng trong jquery datatable 1.10 nhưng điều này không hoạt động. Bạn có thể lưu trữ dữ liệu của bạn nhận được từ yêu cầu ajax trong một mảng và sau đó dựa trên điều kiện của sự kiện nhấp vào hộp kiểm vẽ lại bảng với dữ liệu và đầu vào (hộp kiểm) với thuộc tính đã chọn.