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

【问题标题】：Datatables. Keeping selected row after submit数据表。提交后保留选定的行
【发布时间】：2017-06-22 07:16:30
【问题描述】：

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

提交后是否可以保留他选择的行？

【问题讨论】：

可以创建一个隐藏输入来存储行吗？将该行从代码提交到隐藏输入...也许？只是跳出框框思考。

标签： jquery datatables datatables-1.10

【解决方案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 复制到另一个浏览器选项卡。

【讨论】：

【解决方案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())   
})

【讨论】：