javascript - 清除 DataTable 上的 saveState 不能正常工作

Question

我在使用我的项目中的 DataTable jQuery 插件时遇到了一些问题。使用 DataTable 的表有 20 多个。下面是放置在每个使用带有 DataTable 的表格的页面上的 javascript。

$(document).ready(function() {

    pageSetUp();

    var responsiveHelper_datatable_fixed_column = undefined;

    var breakpointDefinition = {
        tablet : 1024,
        phone : 480
    };

    var otable = $('#datatable_fixed_column_GroupEnquiry').DataTable({
        "stateSave": true, // saves state using localStorage
        "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12'<'toolbar'>>r>"+
            "t"+
            "<'dt-toolbar-footer'<'col-xs-12 col-sm-6 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        "autoWidth" : true,
        "oLanguage": {
            "sSearch": '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>'
        },
        "preDrawCallback" : function() {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper_datatable_fixed_column) {
                responsiveHelper_datatable_fixed_column = new ResponsiveDatatablesHelper($('#datatable_fixed_column_GroupEnquiry'), breakpointDefinition);
            }
        },
        "rowCallback" : function(nRow) {
            responsiveHelper_datatable_fixed_column.createExpandIcon(nRow);
        },
        "drawCallback" : function(oSettings) {
            responsiveHelper_datatable_fixed_column.respond();
        }       

    });

    otable.state.clear(); //to clear saveState, but only work if the page is load for the second time

    // Apply the filter
    $("#datatable_fixed_column_GroupEnquiry thead th input[type=text]").on( 'keyup change', function () {

        otable
            .column( $(this).parent().index()+':visible' )
            .search( this.value )
            .draw();

    } );
});

情况

表格与 saveState 完美配合。当用户转到特定页面(例如:第 5 页)，并单击查看详细信息(加载新的详细信息页面)，然后单击后退按钮(使用表格加载上一页)时，表格仍停留在当前页面(第 5 页)。这就是我想要的。

问题

当用户点击导航并重定向到表格时，它仍然加载具有先前状态(在第 5 页)的表格而不是显示第一页并且没有任何搜索过滤器。

预期结果

假设当用户点击导航并加载表格时，表格应显示为新鲜状态(在第 1 页且没有任何搜索过滤器)。

尝试:

我按照上面提供的代码放置了otable.state.clear()，用于在用户单击导航和显示表格时清除表格的saveState。但它的行为很奇怪，它只适用于第二次点击导航。

我不知道 saveState 实际上是如何工作的，是否有必要为每个表提供唯一的 ID (#datatable_fixed_column_GroupEnquiry)？我在不同的页面中有 20 多个表。如何清除特定按钮(导航)上的 saveState 并加载新的状态表。

Answer 1

如果其他人正在寻找解决方案，这对我有帮助。 我有这样的情况，当我使用链接访问数据表或按下刷新时，我想清除状态。

我将下面的代码放在 $(document).ready() 中 dataTable 的初始化之上

if (performance.navigation.type != 2){ //checks if page is accessed through a link or refresh
    var table = $('#orderHistoryTable').DataTable();
    table.state.clear();
    table.destroy(); // need to destroy the table, I don't know why..
}