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

Posted

技术标签:

【中文标题】如何在 JQuery 数据表中重置分页【英文标题】:How to reset pagination in a JQuery datatable 【发布时间】:2013-09-07 08:14:36 【问题描述】:

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

【问题讨论】:

【参考方案1】:

重新加载后可以显式跳转到第一页,见http://datatables.net/api#fnPageChange

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

【讨论】:

啊,是的,这就是我正在寻找的功能。但是,我必须先更改页面以防止返回的 ajax 调用出现计时问题,因此将 table.fnPageChange(0) 放在 table.fnReloadAjax() 之前。谢谢! 很高兴它起作用了,我编辑了我的答案,以便像你说的那样实际起作用。 这个解决方案的问题是它发送了两个请求。一个用于更改页面,另一个用于重新加载数据。【参考方案2】:

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

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

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

我发现 fnPageChange 是第一次做的。

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

【讨论】:

【参考方案3】:

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

 "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

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

【讨论】:

以上是关于如何在 JQuery 数据表中重置分页的主要内容,如果未能解决你的问题,请参考以下文章

Primefaces 数据表重置分页

如何防止 Bootstrap-Vue 分页自动重置

下一页单击分页后Laravel过滤器重置

如何使用 jQuery 和 Django 分页附加数据页面?

jQuery数据表分页

使用 JQUERY 和 AJAX 在 Laravel 分页中重新填充表数据