Jquery Bootgrid - Change current page programmatically

Question

I have a "Bootgrid" grid with json data (not using ajax).

Pagination buttons work fine, but I want to change the current page programmatically.

Something like $("#grid").bootgrid().setCurrentPage(100);

I don't see the API providing a method for that so how can I achieve it?

Answer 1

As you have seen, bootgrid doesn't provide a built-in way to change the current page yet. You can extend it, though.

Add this to some .js file you're loading in your page:

$.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

---

Then you can use it in your grid, like this:

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

// add some rows with json data
grid.bootgrid('append',
[
    {
      "id": 19,
      "sender": "[email protected]",
      "received": "2014-05-30T22:15:00"
    },
    {
      "id": 14,
      "sender": "[email protected]",
      "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');

So basically, I add a new method to its prototype, which will change the active button (just for styling purposes), and change bootgrid's current property.

After changing the page number, we call the sort method as a workaround to force bootgrid to reload its data, without resetting the page number, as reload would.

---

Check this JSFiddle I created. Try it!!