jQuery 数据表全选复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42570465/
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
Datatables Select All Checkbox
提问by Mickey Cheong
The demo on the select all doesn't really work. https://datatables.net/extensions/select/examples/initialisation/checkbox.html
select all 上的演示并没有真正起作用。 https://datatables.net/extensions/select/examples/initialisation/checkbox.html
What's the best way to implement the select all checkbox after they are created via the columnDefattributes?
在通过columnDef属性创建后实现全选复选框的最佳方法是什么？
回答by annoyingmouse
This should work for you:
这应该适合你：
let example = $('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
]
});
example.on("click", "th.select-checkbox", function() {
if ($("th.select-checkbox").hasClass("selected")) {
example.rows().deselect();
$("th.select-checkbox").removeClass("selected");
} else {
example.rows().select();
$("th.select-checkbox").addClass("selected");
}
}).on("select deselect", function() {
("Some selection or deselection going on")
if (example.rows({
selected: true
}).count() !== example.rows().count()) {
$("th.select-checkbox").removeClass("selected");
} else {
$("th.select-checkbox").addClass("selected");
}
});
I've added to the CSS though:
不过，我已经添加到 CSS 中：
table.dataTable tr th.select-checkbox.selected::after {
content: "?";
margin-top: -11px;
margin-left: -4px;
text-align: center;
text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;
}
Working JSFiddle, hope that helps.
回答by Gyrocode.com
You can use Checkboxesextension for jQuery Datatables.
您可以为 jQuery 数据表使用Checkboxes扩展。
var table = $('#example').DataTable({
'ajax': 'https://api.myjson.com/bins/1us28',
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']]
});
See this examplefor code and demonstration.
有关代码和演示，请参阅此示例。
See Checkboxesproject page for more examplesand documentation.
回答by Sanal S
You can use this optionprovided by dataTableitselfusing buttons.
dom: 'Bfrtip',
buttons: [
'selectAll',
'selectNone'
]'
dom: 'Bfrtip',
buttons: [
'selectAll',
'selectNone'
]'
Here is a sample code
这是一个示例代码
var tableFaculty = $('#tableFaculty').DataTable({
"columns": [
{
data: function (row, type, set) {
return '';
}
},
{data: "NAME"}
],
"columnDefs": [
{
orderable: false,
className: 'select-checkbox',
targets: 0
}
],
select: {
style: 'multi',
selector: 'td:first-child'
},
dom: 'Bfrtip',
buttons: [
'selectAll',
'selectNone'
],
"order": [[0, 'desc']]
});
回答by Francisco Daniel
I made a simple implementation of this functionality using fontawesome, also taking advantage of the Select Extension, this covers select all, deselect some items, deselect all. https://codepen.io/pakogn/pen/jJryLo
我使用 fontawesome 对这个功能做了一个简单的实现，也利用了选择扩展，这包括全选、取消选择一些项目、取消全选。https://codepen.io/pakogn/pen/jJryLo
HTML:
HTML：
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>
<button style="border: none; background: transparent; font-size: 14px;" id="MyTableCheckAllButton">
<i class="far fa-square"></i>
</button>
</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>0,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>0,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>3,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>7,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>7,900</td>
</tr>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>5,500</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>3,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>,560</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
Javascript:
Javascript：
$(document).ready(function() {
let myTable = $('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0,
}],
select: {
style: 'os', // 'single', 'multi', 'os', 'multi+shift'
selector: 'td:first-child',
},
order: [
[1, 'asc'],
],
});
$('#MyTableCheckAllButton').click(function() {
if (myTable.rows({
selected: true
}).count() > 0) {
myTable.rows().deselect();
return;
}
myTable.rows().select();
});
myTable.on('select deselect', function(e, dt, type, indexes) {
if (type === 'row') {
// We may use dt instead of myTable to have the freshest data.
if (dt.rows().count() === dt.rows({
selected: true
}).count()) {
// Deselect all items button.
$('#MyTableCheckAllButton i').attr('class', 'far fa-check-square');
return;
}
if (dt.rows({
selected: true
}).count() === 0) {
// Select all items button.
$('#MyTableCheckAllButton i').attr('class', 'far fa-square');
return;
}
// Deselect some items button.
$('#MyTableCheckAllButton i').attr('class', 'far fa-minus-square');
}
});
});
回答by John Kenneth larbo
Base on Francisco Daniel's answer I modified some of the Jquery code here's My version. I removed some excess code and use "fa" instead of "far" for the icon. I also remove the "far fa-minus-square" since I can't understand its purpose.
基于弗朗西斯科丹尼尔的回答，我修改了一些 Jquery 代码，这里是我的版本。我删除了一些多余的代码并使用“fa”而不是“far”作为图标。我还删除了“far fa-minus-square”，因为我无法理解它的用途。
-- Edited --
-- 编辑 --
I added the "draw" event for the button icon to update whenever the table is redrawn or reloaded. Because I noticed when I tried to reload the table using "myTable.ajax.reload()" the button icon is not changing.
我为按钮图标添加了“绘制”事件，以便在重新绘制或重新加载表格时进行更新。因为我注意到当我尝试使用“myTable.ajax.reload()”重新加载表格时，按钮图标没有改变。
https://codepen.io/john-kenneth-larbo/pen/zXeYpz
https://codepen.io/john-kenneth-larbo/pen/zXeYpz
$(document).ready(function() {
let myTable = $('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0,
}],
select: {
style: 'os', // 'single', 'multi', 'os', 'multi+shift'
selector: 'td:first-child',
},
order: [
[1, 'asc'],
],
});
myTable.on('select deselect draw', function () {
var all = myTable.rows({ search: 'applied' }).count(); // get total count of rows
var selectedRows = myTable.rows({ selected: true, search: 'applied' }).count(); // get total count of selected rows
if (selectedRows < all) {
$('#MyTableCheckAllButton i').attr('class', 'fa fa-square-o');
} else {
$('#MyTableCheckAllButton i').attr('class', 'fa fa-check-square-o');
}
});
$('#MyTableCheckAllButton').click(function () {
var all = myTable.rows({ search: 'applied' }).count(); // get total count of rows
var selectedRows = myTable.rows({ selected: true, search: 'applied' }).count(); // get total count of selected rows
if (selectedRows < all) {
//Added search applied in case user wants the search items will be selected
myTable.rows({ search: 'applied' }).deselect();
myTable.rows({ search: 'applied' }).select();
} else {
myTable.rows({ search: 'applied' }).deselect();
}
});
});<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>
<button style="border: none; background: transparent; font-size: 14px;" id="MyTableCheckAllButton">
<i class="far fa-square"></i>
</button>
</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>0,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>0,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>3,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>7,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>7,900</td>
</tr>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>5,500</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>3,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>,560</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>