jQuery DataTable checkall

Question

HTML

<div class="box"> 
<table id="Datatable"> 
    <thead> 
     <tr> 
     <th><input name="checkall" type="checkbox" class="checkall" value="ON" /></th> 
     <th>field</th> 
     <th>field</th> 
     <th>field</th> 
     <th>field</th> 
     <th>field</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <th class="checkers"><input type="checkbox" name="selected[]"/></th> 
     <td>value</td>           
     <td>value</td> 
     <td>value</td> 
     <td>value</td> 
     <td>value</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

Tôi đang cố gắng để làm cho hộp kiểm checkall chọn tất cả các hộp kiểm bên sử dụng mã này:

$('.checkall').click(function() { 
     var checkall =$(this).parents('.box:eq(0)').find(':checkbox').attr('checked', this.checked); 
     $.uniform.update(checkall); 
    }); 

như được thấy trong DataTable đầu tiên 10,20,30 .. vv hàng và loại bỏ những người khác từ DOM để làm việc phân trang, mã jQuery này chỉ chọn các hàng trong trang hiện tại. Vì vậy, có anyway mà tôi có thể chọn tất cả các hộp kiểm?

Answer 1

tôi tìm thấy giải pháp

$('.checkall', oTable.fnGetNodes()).click(function() { 

Answer 2

Tôi nghĩ rằng điều đó là không thể, tôi muốn sử dụng một tham số khác để thông báo cho máy chủ rằng tất cả các bản ghi đã được kiểm tra. Bằng cách đó bạn có thể thực hiện logic của bạn để kiểm tra tất cả ở phía máy chủ.

Answer 3

datatables cung cấp một plugin "TableTools" trong đó bao gồm chức năng này.

http://datatables.net/extras/tabletools/

đây là ví dụ về lựa chọn hàng, cả hai dùng một lựa chọn và mulit-chọn:

http://datatables.net/release-datatables/extras/TableTools/select_single.html

http://datatables.net/release-datatables/extras/TableTools/select_multi.html

thêm vào đó, khi bạn khởi tạo DataTable của bạn với Plugin TableTools được kích hoạt, bạn có quyền truy cập vào các phương thức API sau:

• fnIsSelected
• fnSelect
• fnSelectAll
• fnSelectNone

các phương pháp API được ghi nhận ở đây:
http://datatables.net/extras/tabletools/api

Answer 4

Cũ chủ đề nhưng tôi có một vài đóng góp.

Để tự động tạo ra một cột checkbox chứ không phải làm nội tuyến này, thêm này để định nghĩa cột của bạn:

"aoColumnDefs": [ { "mRender": function (data, type, full) { 
    return '<input type="checkbox" id="id" class="class" value="' + data + '">'; }, "aTargets": [0] } ] 

// Note: aTargets is the zero-indexed array determining placement of the checkbox column 
// "aTargets": [0] gives you the first column (first from left) 

Như RUN-CMD gợi ý bạn có thể sử dụng TableTools để xử lý hàng lựa chọn, nhưng điều này didn' t giúp op vì việc chọn/đánh dấu tất cả các hàng tách biệt với việc kiểm tra đầu vào của hàng. Tuy nhiên, nó là một chất tăng cường thị giác tốt đẹp.

Chúng tôi lập trình có thể kiểm tra hộp kiểm của hàng bằng cách thêm mã này vào _fnRowSelect() chức năng trong TableTools.js (chức năng là dòng 1079-1119 trong tập tin của tôi):

// This marks them as selected 
    for (i=0, len=data.length ; i<len ; i++) 
    { 
     data[i]._DTTT_selected = true; 

     if (data[i].nTr) 
     { 
      $(data[i].nTr).addClass(that.classes.select.row); 
      // Now if there's a checkbox somewhere in the row - we check it 
      $(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', 'checked'); 
     } 
    } 

Và trong khi chúng tôi đang chỉnh sửa tập tin này, chúng ta hãy thực hiện một nút TableTools mới mà Toggles chọn tất cả/không chọn. Bây giờ chúng ta sẽ không phải ràng buộc cả hai hàm vào một nút.

Chúng tôi sẽ tạo ra nút này ngay sau khi chọn tất cả và chọn nút none trong TableTools.js (bắt đầu tại dòng 2393 trong tập tin của tôi):

/* Combines select_all and select_none buttons 
* Default button text is a checkbox 
* to strip button style and use a checkbox alone put this on native page: 
* $(".select-all-master").removeClass("btn"); 
*/ 
"select_master": $.extend({}, TableTools.buttonBase, { 
    "sButtonText": '<input type="checkbox" id="master_check" class="row_checks master_check" value="">', 
    "sButtonClass": "select-all-master", 
    "sAction": "div", 
    "sTag": "div", 
    "fnClick": function(nButton, oConfig) { 
     var that = this; 
     var selected = false; 
     $("table tr").each(function(i) { 
      if ($(this).hasClass("active")) { 
       selected = true; 
      } 
     }); 
     if (selected==false) { 
      that.fnSelectAll(); 
      $("#master_check").prop('checked', 'checked'); 
     } 
     if (selected==true) { 
      that.fnSelectNone(); 
      $("#master_check").prop('checked', ''); 
      selected = false; 
     } 
    } 
}), 

Bây giờ chúng ta có thể áp dụng chọn tất cả/không chuyển đổi của chúng tôi bằng gọi nó như là bất kỳ nút TableTools nào. Trong bảng của chúng tôi cụ init:

"aButtons": [ { "sExtends": "select_master","sToolTip": "Tool tip to display on checkbox hover" } ] 

Cũng trong datatables mẹ đẻ của bạn init bạn có thể sử dụng:

Javascript:

$(document).ready(function() { 
    $(".select-all-master").appendTo("thead#selectallbtn"); 
    $(".select-all-master").removeClass("btn"); 
}); 

html:

<thead class="selectallbtn"></thead> 

Nếu bạn muốn loại bỏ phong cách nút và đặt nó vào tiêu đề bảng của bạn như một hộp kiểm bình thường tất cả/không có bộ điều khiển. Nếu bạn không sử dụng bootstrap, hãy cân nhắc thực hiện điều gì đó như thế này (link) trong CSS và mã của bạn sẽ hoạt động tốt.

cung cấp tất cả mọi thứ diễn ra suôn sẻ cho bạn, kết quả sẽ được cái gì này: http://screencast.com/t/c3ZDi0mmiGj

tiện lớn nhất được nhắm mục tiêu vào hộp kiểm: kiểm tra tài sản từ bất cứ nơi nào bên trong liên tiếp, không chỉ trên cách nhấn vào hộp kiểm. Hữu ích cho người dùng có độ phân giải cao hoặc touchpunch/touchstart di động.

Answer 5

Giải pháp của tôi làm việc quá:

$('.checkall').click(function(e) { 

      var chk = $(this).prop('checked'); 

      $('input', oTable.fnGetNodes()).prop('checked',chk); 
     }); 

Và nếu bạn muốn kiểm tra chỉ lọc (nếu bạn sử dụng dom cho lọc trong datatables), sau đó bạn có thể sử dụng này, để kiểm tra chỉ lọc

$('.checkall').click(function(e) { 

      var chk = $(this).prop('checked'); 

      $('input', oTable.$('tr', {"filter": "applied"})).prop('checked',chk); 
     });