我有一个带有数据表的 Thymeleaf 模板 (1.10.15)
<script th:inline="javascript">
$(document).ready(function() {
$('#deviceEventTable').dataTable( {
"order": [[ 0, "desc" ]],
"bLengthChange": false,
"bStateSave": true,
"pageLength": 20,
});
$('#deviceEventTable tbody').on('click', 'td', function () {
$(this).closest("tr").toggleClass('selected');
});
} );
</script>
我也在表中定义了这个
<tr th:each="deviceEvent : ${deviceEvents}" onclick="javascript:document.getElementById('deviceEventFormId').submit();" >
提交后可以保留所选行吗?
最佳答案
为什么不使用 select
扩大?使跟踪选定的行变得更加容易。然后,您可以存储每次选择或取消选择时选择的行:
table.on('select.dt deselect.dt', function() {
localStorage.setItem( 'DataTables_selected', table.rows( { selected: true }).toArray() )
})
使用initComplete
回调来恢复表格初始化时的选定状态:
var table = $('#example').DataTable({
select: true,
stateSave: true,
initComplete: function() {
var api = this.api();
var selected = localStorage.getItem( 'DataTables_selected' ).split(',');
selected.forEach(function(s) {
api.row(s).select();
})
}
})
演示 -> http://jsfiddle.net/jrjfhjf9/
尝试选择一些行并单击运行(用于重新加载)或将 URL 复制到另一个浏览器选项卡。
关于jquery - 数据表。提交后保留所选行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44692615/