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

Question

我有一个包含 json 数据的 "Bootgrid" 网格（未使用 ajax）。

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

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

我没有看到 API 提供方法，我该如何实现？

Answer 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;
}

You can paste it in the same .js you use to build bootgrid and load data

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

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

// add some rows with json data
grid.bootgrid('append',
[
    {
      "id": 19,
      "sender": "foo@test.com",
      "received": "2014-05-30T22:15:00"
    },
    {
      "id": 14,
      "sender": "bar@test.com",
      "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 方法作为变通方法 强制 bootgrid 重新加载 其数据，无需重置 页码，如 reload 那样。

勾选this JSFiddle我创建的。试试看！！

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

Jquery Bootgrid - Change current page programmatically

jquery

jquery-ui

twitter-bootstrap

jquery-bootgrid