Question

我有一个JQuery数据表，它通过ajax请求加载数据。表格中有一个表单，允许用户过滤服务器上的结果。当用户更改过滤器表单时，我使用新的过滤器数据调用fnReloadAjax（），并使用新的过滤结果重新绘制表。

我遇到的问题是，即使桌子不再有足够的物品到达当前页面，分页仍然存在。因此，如果表最初有20个项目，并且用户在第2页（每页10个项目），并且他们更改了过滤器，因此只返回了5个项目，表格中没有显示任何项目，并在底部显示：

Showing 11 to 5 of 5 entries

即使只有一页的数据足够，它仍然在第2页。

我发现了许多关于尝试保留当前页面/行的帖子，但没有显示将页面重置为第一页的简单方法。最简单的方法是什么？

为清晰起见，这是我的代码的简化版本：

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

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

 "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

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

Answer 3

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

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

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

我发现fnPageChange是第一次这样做的。

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

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

3 个答案: