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

时间:2017-03-08 01:04:13

标签: jquery twitter-bootstrap jquery-ui jquery-bootgrid

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

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

类似于$(“#grid”)。bootgrid()。setCurrentPage(100);

我没有看到API为此提供方法,所以我该如何实现呢?

1 个答案:

答案 0 :(得分:2)

如您所见,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;
}
  

您可以将其粘贴到用于构建bootgrid并加载数据

.js

然后你可以在网格中使用它,如下所示:

// 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属性。< / p>

更改页码后,我们将sort方法称为强制bootgrid重新加载其数据的解决方法,不重置页码, reload会。

检查我创建的this JSFiddle。试试!!