saveState on DataTable不是很好地工作

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

    } );
});

Situation

这些表与saveState完美地工作。当用户转到特定的页面(例如:第5页)，单击“查看详细信息”(“加载新的详细信息”页)，单击“上一页”按钮(用表加载前一页)，而该表仍然停留在当前页(第5页)上。这就是我想要的。

问题

当用户单击导航并重定向到该表时，它仍然以先前的状态(在第5页中)加载表，而不是显示第1页，也不需要任何搜索筛选器。

预期结果

假设当用户单击导航和加载表时，表应该显示新的状态(在第1页上，没有任何搜索过滤器)。

尝试

我将otable.state.clear()放置在上面提供的代码中，以便在用户单击导航和显示表时清除表中的saveState。但是它的行为很奇怪，它只对导航的第二次点击起作用。

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

Answer 1

如果其他人在寻找解决方案，这对我有帮助。当我使用链接访问dataTable或按刷新时，我想清除状态。

我将下面的代码放在$(Document) dataTable ()的init上面

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..
}