javascript 如何在 JQuery 数据表中重置分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18603386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reset pagination in a JQuery datatable
提问by JMB
I have a JQuery datatable that loads data via an ajax request. There is a form by the table that lets the user filter the results on the server. When the user changes the filter form, I call fnReloadAjax() with the new filter data, and the table redraws with the new, filtered results.
我有一个 JQuery 数据表，它通过 ajax 请求加载数据。表格旁边有一个表格，可让用户过滤服务器上的结果。当用户更改过滤器表单时，我使用新的过滤器数据调用 fnReloadAjax()，然后使用新的过滤结果重新绘制表格。
The problem I have is that the pagination sticks, even if the table no longer has enough items to reach the current page. So if the table originally had 20 items, and the user was on page 2 (10 items per page), and they change the filter so only 5 items are returned, the table displays no items and shows this at the bottom:
我遇到的问题是分页会粘住，即使表格不再有足够的项目来到达当前页面。因此，如果表格最初有 20 个项目，并且用户在第 2 页（每页 10 个项目），并且他们更改过滤器以便只返回 5 个项目，则表格不显示任何项目并在底部显示：
Showing 11 to 5 of 5 entries
It's still on page 2 even though there is only enough data for one page.
即使只有一页的数据，它仍然在第 2 页。
I have found numerous posts about trying to preserve the current page/row, but none showing a simple way to reset pagination to the first page. What is the simplest way to do this?
我发现了许多关于尝试保留当前页面/行的帖子，但没有一个显示将分页重置为第一页的简单方法。什么是最简单的方法来做到这一点？
Here's a simplified version of my code for clarity:
为了清楚起见，这是我的代码的简化版本：
$("#mytable").dataTable({
bStateSave: false,
fnServerData: function (sSource, aoData, fnCallback) {
return $.ajax({
type: "POST",
url: url,
data: {filter: filterValue}
});
}
});
$("#myForm").submit(function(e) {
table.fnReloadAjax();
return false;
});
采纳答案by Gigo
You could explicitly jump to the first page after reloading, see http://datatables.net/api#fnPageChange
您可以在重新加载后显式跳转到第一页，请参阅http://datatables.net/api#fnPageChange
$("#myForm").submit(function(e) {
table.fnPageChange(0);
table.fnReloadAjax();
return false;
});
回答by RPG II
This can be solved by implementing the functions to save and load the state of the datatable and resetting the start point - example below
这可以通过实现保存和加载数据表状态并重置起点的功能来解决 - 下面的示例
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'MyDataTable', JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
var settings = JSON.parse( localStorage.getItem('MyDataTable') );
settings.iStart = 0; // resets to first page of results
return settings
},
As fnStateLoad is called when the table is reloaded - e.g. a new filter is applied - the paging is reset to the start.
当重新加载表时调用 fnStateLoad - 例如应用新过滤器 - 分页重置为开始。
fnStateSave is called each time you retrieve the next page of results
每次检索下一页结果时都会调用 fnStateSave
This approach avoids the overhead of an additional request back to the server
这种方法避免了额外请求返回服务器的开销
回答by workdreamer
Accepting the solution given by @Gigo:
接受@Gigo 给出的解决方案：
$("#myForm").submit(function(e) {
table.fnPageChange(0);
table.fnReloadAjax();
return false;
});
This have a problem, it sends two request to the server.
这有问题，它向服务器发送两个请求。
i have found that the fnPageChange does it at the first time.
我发现 fnPageChange 是第一次完成的。
$("#myForm").submit(function(e) {
table.fnPageChange(0);
return false;
});
