jquery - 数据表。提交后保留所选行

Question

我有一个带有数据表的 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();"    >

提交后可以保留所选行吗？

Answer 1

为什么不使用 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 复制到另一个浏览器选项卡。