选择 Jquery 数据表中的所有行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24999375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select All rows in Jquery Datatables
提问by pise
I have a datatables in which I can select multiple row onclick but how can I select all the row on a click of button and at the same time all rows are highlighted with selection (Can you please give example of selection for current page and all the pages). I have written a code to get multiple selected value.
我有一个数据表，我可以在其中选择多行 onclick 但是如何通过单击按钮选择所有行，同时所有行都用选择突出显示（您能否举例说明当前页面和所有页）。我编写了一个代码来获取多个选定的值。
Checkbox will also do but then how to get selected value.
复选框也可以，但如何获取选定的值。
Below is code for single and multiple selection.
下面是单选和多选的代码。
var oTable = $("#example").dataTable();
$('#example tbody').on('click', 'tr', function() {
$(this).toggleClass('selected');
});
Code to get selected value on button submit.
在按钮提交时获取选定值的代码。
var row = oTable.rows('.selected').data();
var jsonArr = "[";
if(row != null && row.length){
for (var i = 0; i < row.length; i++) {
var row1 = row[i]; // this will give me one row details
// row1[0] will give me column details
jsonArr = jsonArr + "{\"ID\":" + row1[0] + "},";
}
jsonArr = jsonArr + "]";
回答by Yuri
What will probably help you is TableTools extension. There is an examplewith select_all and select_none buttons, and those work for all pages.
可能对您有帮助的是TableTools 扩展。有一个带有 select_all 和 select_none 按钮的示例，这些按钮适用于所有页面。
One default limitation is that select_all will ignore current filtering, but that is easy to solve using the code below. Providing "true" argument to fnSelectAll enables the filter-aware selection.
一个默认限制是 select_all 将忽略当前过滤，但使用下面的代码很容易解决。为 fnSelectAll 提供“true”参数启用过滤器感知选择。
tableTools: {
sRowSelect: 'multi',
aButtons: [
{
sExtends: 'select_all',
sButtonText: 'Select All',
fnClick: function (nButton, oConfig, oFlash) {
TableTools.fnGetInstance('example').fnSelectAll(true);
}
}
]
}
回答by Ruwantha
According to the docthere is a inbuilt function for this. No need extra coding,
根据文档，有一个内置函数。无需额外编码，
$(document).ready(function() {
$('#example').DataTable( {
dom: 'T<"clear">lfrtip',
tableTools: {
"sRowSelect": "multi",
"aButtons": [ "select_all", "select_none" ]
}
} );
} );
You will need the JS file defined at the doc and aprt from that they have missed to included the following related CSS file
您将需要在 doc 和 aprt 中定义的 JS 文件，他们错过了包含以下相关 CSS 文件
This is all it takes.
这就是全部。
回答by pise
Thank You for your help. But some how I did my select all manually the only loop hole in this is, if I select header check box all the row check box will be selected but when we go on next page eg: page no 2 header check box will be checked and again to select all page no 2 rows check box I have to uncheck and check header checkbox.
感谢您的帮助。但是，我如何手动全选，唯一的漏洞是，如果我选择标题复选框，则所有行复选框都将被选中，但是当我们进入下一页时，例如：第 2 页的标题复选框将被选中，并且再次选择所有页面没有 2 行复选框我必须取消选中并选中标题复选框。
What I did:
我做了什么：
I have added input type checbox thead tr and tbody tr and gave class ='case' to all child input. On click of select all calling a function to select/deselect child rows
我添加了输入类型 checbox thead tr 和 tbody tr 并为所有子输入提供了 class ='case'。单击全选时调用函数来选择/取消选择子行
<thead>
<tr>
<th><input type='checkbox' id='selectall'/></th>
<th>Patient Name</th>
</tr>
</thead>
<tbody>
<tr>
<td class style='text-align: center;'><input type='checkbox' class='case' name='case'id = '"item.uid+"_I' /></td>
<td>"+item.name+"</td>
<tr>
</tbody>
// function to select/deselect all input checkbox
to check uncheck all input box
$('#selectall').click(function(event) { //on click
if(this.checked) { // check select status
$('.case').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox"
$(this).closest("tr").addClass("selected");
});
}else{
$('.case').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox"
$(this).closest("tr").removeClass("selected");
});
}
});
// select/deselect function if single row is selected
$('#patientdata tbody').on('click', 'tr', function() {
var rowID = this.id;
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
$('#'+rowID+"_I").attr('checked', false);
}
else {
$(this).addClass('selected');
$('#'+rowID+"_I").attr('checked', true);
}
});
Thanks
谢谢
