我有一个数据表，第一个 td 中有复选框
有些正在检查，有些则未从数据库中检查
默认情况下它不会对选中/未选中进行排序，所以我还添加了
data-sort但我希望当复选框更改时，数据排序也应该更改，以便正确排序。我在下面做了它正在 dom 中更改
data-sortvar dt3;
$(function(){
dt3 = $('.dt3').DataTable();
$('body').on('change','input.chkV1',function(){
var sortVal = $(this).is(':checked')?1:0;
// $(this).parents('td').attr('data-sort',sortVal);
// $(this).parents('td').data('sort',sortVal);
$(this).parents('td').data('sort',sortVal).attr('data-sort',sortVal);
dt3.draw();
});
});
我认为
dt3.draw();实际上在数据表文档中你可以找到解决方案，但我已经为你做了一个。但如果您还想查看[此处][1]链接。
我已经制作了一个样本供您查看所有细节。只需向 DataTables 扩展添加一个新的排序方法即可。
这是一个相当简单的示例，但您不仅限于使用表单输入元素，您可以使用任何内容并自定义 DOM 查询以适合自己。
DataTable.ext.order['dom-checkbox'] = function (settings, col) {
return this.api()
.column(col, { order: 'index' })
.nodes()
.map(function (td, i) {
return $('input', td).prop('checked') ? '1' : '0';
});
};
var table = $('#table').DataTable({
columns: [
{ orderDataType: 'dom-checkbox' },
{ orderDataType: 'dom-text', type: 'string' },
{ orderDataType: 'dom-text', type: 'string' },
{ orderDataType: 'dom-text', type: 'string' },
{ orderDataType: 'dom-text', type: 'string' },
{ orderDataType: 'dom-text', type: 'string' },
{ orderDataType: 'dom-text', type: 'string' },
]
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DataTable Checkbox Sorting</title>
<link href="https://cdn.datatables.net/v/dt/dt-1.13.10/datatables.min.css" rel="stylesheet"/>
</head>
<body>
<table id="table" class="display" style="width:100%">
<thead>
<tr>
<th>Checked</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" value="5"></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" value="1"></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$170,750</td>
</tr>
<tr>
<td><input type="checkbox" value="2"></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009-01-12</td>
<td>$86,000</td>
</tr>
<tr>
<td><input type="checkbox" value="6"></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.13.10/datatables.min.js"></script>
</body>
</html>