Jquery datatable với hộp kiểm trong tiêu đề và trong hàng: chọn tất cả các hộp kiểm không hoạt động

Question

Tôi đang sử dụng Jquery Datatable. Tôi muốn có một cột đầu tiên với tiêu đề và hàng có hộp kiểm và nên chuyển đổi lựa chọn hộp kiểm tiêu đề với các hộp kiểm của hàng còn lại. Tôi có dưới đây thực hiện.

thuộc tính DataTable

"aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null] 

DataTable hàng

<td><input type="checkbox' class="case"></input></td> 

chức năng Javascript

function toggleChecks(obj) 
    { 
     $('.case').prop('checked', obj.checked); 
    } 

này được làm việc tốt khi tôi đang trên trang duy nhất. Nhưng khi tôi thực hiện phân trang thì các hộp kiểm vẫn được bỏ chọn cho trang khác. Làm thế nào để đạt được điều này cho hành xử nhất quán cho tất cả các hộp kiểm. Xin vui lòng giúp đỡ.

Answer 1

Bạn nên sử dụng hàm fnDrawCallback để cập nhật ở đó bảng khi trang thay đổi.

Bạn có thể kiểm tra chức năng này giá trị của hộp kiểm tiêu đề và cập nhật các hộp kiểm hàng mới.

Bạn cũng có thể thêm giá trị boolean vào đối tượng trong mô hình và thay đổi giá trị đó khi bạn chọn hoặc bỏ chọn. Nếu bạn truy cập vào mô hình, bạn có thể sửa đổi các giá trị của tất cả các phần tử của bạn, không chỉ các giá trị được hiển thị. Sau đó, khi bạn tải các ô của mình, bạn biểu thị đúng/sai với hộp kiểm. Đây là cách tiếp cận nhất quán nhất, nhưng có lẽ sẽ liên quan đến nhiều công việc hơn để có được sự đồng bộ hóa tốt giữa mô hình và khung nhìn.

Answer 2

guys,

có vấn đề tương tự cần giải pháp nhanh.

Made một cách giải quyết cho vấn đề này, có thể giúp ai đó:

Như tôi đã tự động ăn bàn một số dữ liệu:

oTable1.fnAddData 
([ 
    "<span id='" + any_obj.id + "' style='display:block; width: 10px;'><input class='checkbox' type='checkbox' /></span>", 
    title, 
    modified, 
    version 
]); 

Thông báo nhịp cho hộp kiểm. Điều này rõ ràng là vẫn ẩn và có thể được truy cập dễ dàng.

Answer 3

Tôi đã làm một cái gì đó như thế nào,

$('#selectall').change(function() { 
         var isSelected = $(this).is(':checked'); 
         if(isSelected){ 
          $('.case').prop('checked', true); 
         }else{ 
          $('.case').prop('checked', false); 
         } 
        }); 

trên tài liệu đã sẵn sàng.