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

如果其他人正在寻找解决方案，这对我有帮助。我遇到的情况是，当我通过链接访问dataTable或按刷新时想清除状态。

我将下面的代码放在$（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..
}

在DataTable上清除saveState不能很好地工作

1 个答案: