数据表 - 回调后保留选定的页码

Posted 2023-05-07

【中文标题】数据表 - 回调后保留选定的页码

【英文标题】：Datatables - Keeping selected page number after callback

【发布时间】：2014-09-29 06:28:40

【问题描述】：

我有一个数据表，我应该对其进行更改，例如我想更改内容的状态，但该内容位于表的第 3 页。当我更改它时，数据表会自行刷新到第一页。我要做的是保留选定的页码并在刷新后将其回调。这可能吗？

顺便说一句，我使用的是数据表 1.9.4

编辑：解决方案

我所做的只是将页码保留在我在数据表中所做的每个操作中，并将其发送到控制器，然后通过 TempData 使用它。如果有人需要解决方案，请告诉我，我可以解释得更详细。

【问题讨论】：

http://datatables.net/plug-ins/api/fnStandingRedraw

我想我问错了问题：当我改变内容的状态时，它会转到服务器端，当它回来时，它会重定向到一个动作。这个插件在那种情况下也可以工作吗？我尝试过，但无法管理。

为什么它会重定向到一个动作？您应该调用fnDraw() 来刷新数据表

因为我正在提交表单，提交后刷新页面。

好的，我明白了。不幸的是，我不知道如何解决这个问题。我有一个快速的谷歌并找到 http://legacy.datatables.net/ref#fnPageChange 这可能会有所帮助

【参考方案1】：

我将数据表状态保存在本地存储中，以避免在我的应用程序中传递页码。我就是这样做的：

$('#offersTable').dataTable(
        "bStateSave": true,
        "fnStateSave": function (oSettings, oData) 
            localStorage.setItem('offersDataTables', JSON.stringify(oData));
        ,
        "fnStateLoad": function (oSettings) 
            return JSON.parse(localStorage.getItem('offersDataTables'));
        
    );

当您转到另一个页面并且想要返回（使用后退按钮）到最后选择的页面时，这非常有用。

另请参阅文档：https://datatables.net/blog/2012-01-16

【讨论】：

这是解决我问题的最佳方案，非常感谢。

你刚刚节省了我的 4 个小时。谢谢！！

【参考方案2】：

在 DataTables 1.10 中，如果您将 false 作为第一个参数传递给 draw() 函数，您可以在重新绘制后保持在同一页面上。

table.row(index).data(data).draw(false)

【参考方案3】：

以下是 DataTable v1.10.7 中的操作方法： DataTable 为您将状态存储在 cookie 中。

    $(document).ready(function() 
        $('#example').dataTable( 
            stateSave: true
         );
     );

【讨论】：

我不知道为什么不赞成这个解决方案。这对我来说非常有用。我赞成你的建议。

因为这个问题已经很老了，比如 6 岁，并且从那以后接受的答案一直运行良好。 :) 但这是答案是最特定于图书馆的，也是最切题的答案。

【参考方案4】：

如果您使用的是服务器端数据表，那么您可以使用ajax.reload() 函数重新加载数据表。 像这样使用

var dt = $("#table").DataTable();
dt.ajax.reload(null, false); // false if you don't want to refresh paging else true.

请参阅https://datatables.net/reference/api/ajax.reload() 链接。

【参考方案5】：

如果您在第 3 页上使用 ajax 更新任何数据，并且您不希望在刷新数据表中的数据后它会再次转到第一页，所以这里是刷新表数据但不重定向的解决方案你到第一页。它将反映在同一页面上的更改。

以下内容将 不会 重定向 到 首页 页面 使用 ajax 刷新/重新加载数据表后

$('#YOUR_TABLE_ID').DataTable().ajax.reload(null, false); //without refresh table<<page  will not change>>

刷新/重新加载数据后将 重定向 到 第一个 页面使用ajax的表格

  $('#YOUR_TABLE_ID').DataTable().ajax.reload(); //with refresh table <<page will change>>

【讨论】：

如果您在代码中添加一些解释会很好。

@L.F.我只是添加描述和图像以便更好地理解。

这就像一个魅力！非常感谢！但如果你能解释reload(null, false) 的两个参数是什么意思，那就太好了！

@m.beginner 我很高兴这件事对你有用。对于reload(null,false)，请参考THIS LINK 如果您理解该内容，请使用此链接，然后支持我的评论，以便通知我。

现在明白了。谢谢！

【参考方案6】：

重绘表格保持当前分页位置：

var table = $('#example').DataTable();
table.draw( false );

【参考方案7】：

fnStandingRedraw 是您想​​要的。 http://www.craiglotter.co.za/2012/05/28/how-to-refresh-a-datatable-without-losing-your-current-page-or-ordering/

【讨论】：

问题是，我刷新的不仅仅是数据表，还有整个页面。此解决方案仅适用于刷新数据表，但是当我刷新整个页面时，它不起作用。我找到了解决问题的方法，我正在用解决方案更新我的问题。无论如何感谢您的帮助。

【参考方案8】：

这就是我的做法，它对我有用。

$.ajax(
        url: "/CollectionHistory/Search",
        data:  "licenseeId": licenseeId, "locationId": locationId, "month": monthId, "year": yearId, "pageNumber": 1 ,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) 
            if (table != null) 
                table.clear();
                table.destroy();
            
            localStorage.setItem("manageLicenseeDataStateSave", "0");
            table = $("#collection_history").DataTable(
                "data": response.SalesData,
                "columns": [
                     "data": "LocationName", "name": "Location Name", "autowidth": true, className: "text-center"                    
                "bLengthChange": false,
                "bInfo": false,
                "bFilter": false,
                "ordering": true,
                "stateSave": true,
                "language": 
                    "paginate": 
                        "previous": "PREV",
                        "next": "NEXT",
                    
                
            );
        ,
        error: function () 
            window.location.href = "/Home/HandleError";
        
    );

【参考方案9】：

我遇到了这个问题，我的解决方案是使用 draw 方法将 false 值作为参数传递：

this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) =>  
    dtInstance.draw(false); 
);

我正在使用"angular-datatables": "^11.2.0" 版本。