如何在JQuery数据表中重置分页？

Question

我有一个通过ajax请求加载数据的JQuery datatable。表格旁边有一个表单，允许用户在服务器上过滤结果。当用户更改筛选表单时，我使用新的过滤数据调用fnReloadAjax()，然后表格将用新的筛选结果重新绘制。

我遇到的问题是，即使表格不再有足够的项达到当前页面，分页也会固定。因此，如果表格最初有20个项目，并且用户在第2页（每页10个项目）上，然后他们更改筛选方式，使只返回5个项目，则表格不显示任何项目，并在底部显示以下内容:

Showing 11 to 5 of 5 entries

即使只有一页的数据，它仍然停留在第二页。

我发现很多帖子都在讨论如何保留当前页/行，但没有一个简单的方法来重置分页到第一页。最简单的方法是什么？

以下是我的代码简化版本：

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

- JMB

Answer 1

在重新加载页面后，您可以明确地跳转到第一页，请参见http://datatables.net/api#fnPageChange

$("#myForm").submit(function(e) {
    table.fnPageChange(0);
    table.fnReloadAjax();
    return false;
});

- Gigo

---

啊，是的，那就是我一直在找的函数。不过，在调用返回的ajax之前，我必须先更改页面以避免时间问题，所以在table.fnReloadAjax()之前加上table.fnPageChange(0)。谢谢！ - JMB

很高兴它起作用了，我编辑了我的答案以确保像你说的那样工作。 - Gigo

这个解决方案的问题在于它发送了两个请求。一个用于更改页面，另一个用于重新加载数据。 - workdreamer

Answer 2

这可以通过实现保存和加载数据表状态以及重新设置起始点的函数来解决 - 以下是示例。

 "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
  },

当重新加载表格时（例如应用新的筛选器），fnStateLoad被调用，分页将重置为起始位置。

每次检索下一页结果时，都会调用fnStateSave。

这种方法避免了向服务器发出额外请求的开销。

- RPG II

Answer 3

接受@Gigo提供的解决方案：

（保留HTML格式）

$("#myForm").submit(function(e) {
    table.fnPageChange(0);
    table.fnReloadAjax();
    return false;
});

这里有一个问题，它向服务器发送了两个请求。

我发现fnPageChange在第一次执行时会这样做。

$("#myForm").submit(function(e) {
    table.fnPageChange(0);
    return false;
});

- workdreamer