Jquery Bootgrid - 以编程方式更改当前页面

Posted 2023-05-08

【中文标题】Jquery Bootgrid - 以编程方式更改当前页面

【英文标题】：Jquery Bootgrid - Change current page programmatically

【发布时间】：2017-07-28 10:06:10

【问题描述】：

我有一个带有 json 数据的“Bootgrid”网格（不使用 ajax）。

分页按钮工作正常，但我想以编程方式更改当前页面。

类似 $("#grid").bootgrid().setCurrentPage(100);

我没有看到 API 提供了一种方法，那么我该如何实现呢？

【参考方案1】：

如您所见，bootgrid 还没有提供改变当​​前页面的内置方法。不过，您可以扩展它。

将此添加到您正在页面中加载的一些 .js 文件中：

$.fn.bootgrid.Constructor.prototype.setCurrentPage = function (page) 
    $(this).find('li.page-' + this.current).removeClass('active');
    $(this).find('li.page-' + page).addClass('active');
    this.current = page;
    return this;

您可以将其粘贴到用于构建引导网格和加载数据的同一 .js 中

---

然后你可以在你的网格中使用它，像这样：

// create the grid...
var grid = $("#grid-data").bootgrid(
    ajax: false
);

// add some rows with json data
grid.bootgrid('append',
[
    
      "id": 19,
      "sender": "[e-mail]",
      "received": "2014-05-30T22:15:00"
    ,
    
      "id": 14,
      "sender": "[e-mail]",
      "received": "2014-05-30T20:15:00"
    ,
    // ....many rows
]);

// call your custom method, to change to page 3
grid.bootgrid('setCurrentPage', 3);
// calling sort is just a workaround, so bootgrid reloads itself...
grid.bootgrid('sort');

所以基本上，我在其原型中添加了一个新方法，它将更改active 按钮（仅用于样式目的），并更改bootgrid 的current 属性。

更改页码后，我们调用sort 方法作为解决方法来强制引导网格重新加载其数据，无需重置页码，如@987654329 @会。

---

检查我创建的this JSFiddle。试试看！！

【讨论】：

谢谢！我真的很喜欢这个解决方案。我最终修改了 bootgrid.js 以包含一个 showPage() 方法，该方法基本上是一个 load() 副本，但将当前行设置为指定的行

哦，太好了，我考虑过提供此选项作为替代，但请注意缩小版将不起作用（除非您自己缩小并替换它，或者不使用缩小版版本）。在另一个关于另一个功能的答案中，我建议在bootgrid.js 内做类似Grid.prototype.doSomething = function() 的事情。我猜他们不会发布新版本，因此您可能不会在更新软件包和忘记再次添加此代码时遇到问题。