我有以下使用 jQuery Datatables v1.10 的非常简单的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable(
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
</script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>
简单并且工作得很好。正如我想要的那样，从列中删除 Sorting 选项。但是我想使用 stateSave 选项:
$(document).ready(function() {
$('#example').DataTable(
{ stateSave: true},
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
但现在排序再次可用于所有列(不应用 columnDefs 的配置)。
所以我想要实现的是使用 stateSave 但仍然应用排序的配置。
我正在玩
"stateLoadParams": function (settings, data) {
//console.log(settings);
settings.aoColumns[1].orderable = false;
console.log(settings);
}
像这样:
$(document).ready(function() {
$('#example').DataTable(
{ stateSave: true,
"stateLoadParams": function (settings, data) {
//console.log(settings);
settings.aoColumns[1].orderable = false;
console.log(settings);
}},
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
但我仍然无法重新应用排序选项
最佳答案
整个配置应该只是一个对象。您正在创建多个对象，因此为主 datatable() 函数创建多个参数。仅第一个参数用于设置内部选项，其他参数将被忽略
尝试
$(document).ready(function() {
$('#example').DataTable({
stateSave: true,
columnDefs : [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
关于javascript - 如何在jquery数据表中应用columnDefs并将saveState选项设置为true，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50543574/