数据表中的复选框 stateSave 在缓存刷新后消失（所有其他 stateSave 工作）

Posted 2023-05-09

【中文标题】数据表中的复选框 stateSave 在缓存刷新后消失（所有其他 stateSave 工作）

【英文标题】：Checkbox stateSave in Datatables Table disappears after Cache Refresh (all other stateSaves working)

【发布时间】：2018-09-12 07:01:50

【问题描述】：

注意：在我使用的明显（DataTables，jQuery）中..

jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js select/1.2.5/css/select.dataTables.min.css select/1.2.5/js/dataTables.select.min.js

并使用实时 API 调用来填充我的表格。

如标题中所述，在对我的数据表进行硬刷新后，所有其他 saveState 似乎都在 localStorage 中正常运行（分页、排序等）。

使用复选框，我让它们保持在半保存状态，这意味着如果我刷新它们，它们会保持不变，但在缓存刷新 (ctrl+f5) 之后，它们就消失了。

我假设这与 stateSaveCallback 和 stateLoadCallback.. 有一些关系，还有一些东西，例如 StateLoaded，StateLoadParams，StateSaveParams 在数据表中stateSave documentation。

这是我页面底部的数据表初始化。

<script>
$(document).ready(function ()  
   var table = $('#example').DataTable(
      'columnDefs': [
         
            'targets': 0,
            className: 'select-checkbox',
            'checkboxes': 
               'selectRow': true
            
         
      ],
      'select': 
            style:    'multi+shift',
            selector: 'td:first-child'
        ,
      'order': [[1, 'asc']],
      'paging': false,
      'stateSave': true,
      'stateSaveCallback': function(settings,data) 
      localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
    ,
      'stateLoadCallback': function(settings) 
      return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
    
   );
);
</script>

php 和 html 似乎可以正常运行和填充，所以我认为没有必要发布完整的脚本，但这里是复选框部分和一目了然

// getting the variables from the API call

$results .= "<tr><td>$rowCount</td><td><a href=\"$largepic\" target=\"_blank\"><img src=\"$largepic\" style=\"width:225px;height:auto;\"></a> . . . . . 

我使用的是gyroscope datatables checkboxes 插件，它需要一个自定义ID（因此$rowCount 这只是一个$i++ 增加一个for each 循环。

但如前所述，stateSave 对所有其他元素都可以正常工作。复选框和其他输入显然是一个特殊品种？

老实说，我尝试了很多东西，但大多数要么工作异常，要么破坏了脚本。上面的初始化实际上是我能得到的最好的。我会发布一个演示，但因为它是一个 API 初始化，所以我不能这样做。

请任何人经历过这个或知道我能做什么？ 这似乎是一个常见问题，通过这样的元素进行 stateSaving 。复选框，下拉菜单。我假设复选框需要正确保存在localStorage 中并再次检索，但我很难找到一个解决方案，而且我发现很少有信息可以直接解决这个问题。

Gyrocode DataTables CheckBox 插件实际上有很好的文档记录，并在他们的网站上展示了stateSave 和keepConditions 的示例，但到目前为止都还不够。它可能与我如何检索数据以及需要特殊条件来检索它有关。这是我迄今为止最好的猜测。

通过陀螺仪示例，我看到他正在使用一种方法来捕获数据表中的复选框数据

var rows_selected = table.column(0).checkboxes.selected();

      // Iterate over all selected checkboxes
      $.each(rows_selected, function(index, rowId)
         // Create a hidden element
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)
         );
      );

所以这说明了通过数据表获取复选框数据——在本例中是通过表单提交。

我缺少什么会像旁边的其他元素一样保留复选框？

我正在使用截至 2018 年 4 月 2 日的最新数据表，v1.10.16。

【参考方案1】：

在1.10.11 版本中的jQuery DataTables Checkboxes 插件中纠正了一个错误，该错误会阻止在后续页面重新加载时正确保存状态，请参阅this issue #64。

使用latest release，状态保存的问题应该会消失。