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

Datatables - Keeping selected page number after callback

提问by Burak Karaku?

I have a datatable which I should change something on it, for example I want to change the status of a content, but this content is in 3rd page on the table. When I change it, datatable refreshes itself to the 1st page. What I'm trying to do is to keep the selected page number and call it back after refresh. Is that possible?

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

btw, I'm using datatables 1.9.4

顺便说一句，我正在使用数据表 1.9.4

EDIT: SOLUTION

编辑：解决方案

What I've done is simply keeping the page number in every action that I make in datatable and sending it to the Controller and then using it via TempData. If anyone needs a hand about the solution, just make me know, I can explain more detailed.

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

回答by Francisco Goldenstein

I save the datatable state in the local storage to avoid passing the page number all over my app. This is how I do it:

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

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

This is very useful when you go to another page and you want to go back (using the back button) to the last selected page.

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

See also the documentation: https://datatables.net/blog/2012-01-16

另见文档：https: //datatables.net/blog/2012-01-16

回答by Shimon S

In DataTables 1.10 you have an ability to stay on the same page after re-drawing if you pass falseas a first parameter to the draw()function.

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

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

回答by Nagesh Katke

If you are using server side datatable, then you can use ajax.reload()function to reload the datatable. Use like

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

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

See https://datatables.net/reference/api/ajax.reload()link.

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

回答by Manthan Patel

If you are update any data using ajax on page number 3 and you don't want that after refresh my data in data table it will go to first page again so here is the solution that will refresh data of table but not redirect you to first page. it will be reflect changes on same page.

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

This below willnotredirecttofirstpageafter refresh/reload data table using ajax

使用ajax刷新/重新加载数据表后，以下内容不会重定向到第一页

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

This below willredirecttofirstpageafter refresh/reload data table using ajax

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

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

回答by Craig Lotter

fnStandingRedraw is the one you want. http://www.craiglotter.co.za/2012/05/28/how-to-refresh-a-datatable-without-losing-your-current-page-or-ordering/

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

回答by Igor Tepordei

Redraw the table maintaining current paging position:

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

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

回答by anilam

Here is how to do it in DataTable v1.10.7:
DataTable Storing the state in a cookie for you.

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

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

回答by Abhay.Patil

This is how I will do it and it will work for me.

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

$.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";
        }
    });