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

Question

我有一个通过JQuery请求加载数据的ajax数据表。表旁边有一个表单，让用户可以在服务器上过滤结果。当用户更改筛选器表单时，我使用新的筛选器数据调用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;
});

Answer 1

您可以在重新加载后显式跳转到第一页，请参阅http://datatables.net/api#fnPageChange

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

Answer 2

接受@Gigo给出的解决方案：

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

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

我发现fnPageChange会在第一时间做这件事。

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

Answer 3

这可以通过实现保存和加载datatable状态的函数并重置起始点来解决-示例如下

 "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

这种方法避免了向服务器返回额外请求的开销