jQuery的數據表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> 

我試圖讓checkall複選框選擇使用此代碼的所有複選框：

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

由於數據表顯示了第一10,20,30 .. 。etc行，並從DOM中刪除其他人做分頁，這個jQuery代碼只選擇當前頁面中的行。那麼無論如何，我可以選擇所有複選框？

Answer 1

我發現溶液

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

Answer 2

我認爲這是不可能的，我會使用另一個參數來通知服務器所有的記錄被檢查。通過這種方式，您可以在服務器端實現全部檢查邏輯。

Answer 3

數據表提供了一個插件 「TableTools」，其包括該功能。

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

這裏有行選擇的例子，無論是單選和多功能使用選：

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

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

此外，當您與初始化數據表啓動TableTools插件後，您可以訪問以下API方法：

• fnIsSelected
• fnSelect
• fnSelectAll
• fnSelectNone

的API方法是記錄在這裏：
http://datatables.net/extras/tabletools/api

Answer 4

舊線程，但我有一些貢獻。

自動生成一個複選框列，而不是做這行內，添加到您的列定義：

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

由於RUN-CMD建議您可以使用TableTools處理行選擇，但是這沒」因爲選擇/突出顯示所有行與檢查行的輸入是分開的。不過，它是一個很好的視覺增強器。

我們可以通過TableTools.js將此代碼添加到_fnRowSelect（）函數編程方式檢查該行的複選框（功能線1079至1119年在我的文件）：

// 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'); 
     } 
    } 

雖然我們正在編輯這個文件，我們來創建一個新的TableTools按鈕來切換全選/無選擇。現在我們不必將兩個函數都綁定到一個按鈕上。

我們創建這個按鈕選擇權畢竟在TableTools.js選擇無按鈕（在我的檔案在2393線開始）：

/* 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; 
     } 
    } 
}), 

現在我們可以通過應用我們選/切換無像調用TableTools按鈕一樣調用它。在我們的餐桌工具初始化：

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

在本地數據表

而且初始化，您可以使用：

的Javascript：

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

HTML：

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

如果要刪除按鈕樣式並將其作爲普通複選框all/none控制器放入您的表格標題中。 如果你沒有使用bootstrap，請考慮在你的CSS中做這樣的事情（link），代碼應該可以正常工作。

提供一切順利的話，結果應該是這樣的：從任何地方檢查房地產行內，而不僅僅是點擊複選框：http://screencast.com/t/c3ZDi0mmiGj

最大的便利瞄準的複選框。有助於高分辨率用戶或移動觸摸/觸摸啓動。

Answer 5

我的解決辦法也工作：

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

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

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

如果你想只檢查過濾（如果你使用DOM在數據表過濾），那麼你可以使用這個，只檢查過濾

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

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

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