Question

我有一个带有Datatable（1.10.15）的Thymeleaf模板

<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();
    })
  }
})

演示 - ＆gt;的 http://jsfiddle.net/jrjfhjf9/

尝试选择一些行，然后单击 run （用于重新加载）或将URL复制到另一个浏览器选项卡。

Answer 2

与@davidkonrad（上一个答案）相同的方法，修复了 NULL/UNDEFINED 值： http://jsfiddle.net/hvx2n0qa/

var table = $('#example').DataTable({
  select: true,
  stateSave: true,
  initComplete: function() {
    var api = this.api();
    
    if (localStorage.getItem( 'DataTables_selected' ) != undefined){
        var selected =  localStorage.getItem( 'DataTables_selected' ).split(',');
    selected.forEach(function(s) {
      api.row(s).select();
    })
    }

  }
})  

table.on('select.dt deselect.dt', function() {
  localStorage.setItem( 'DataTables_selected', table.rows( { selected: true }).toArray())   
})

数据表。提交后保留选定的行

2 个答案: