1

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?

Rombus
  • 341
  • 1
  • 7
  • 19

1 Answers1

3

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": "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');

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!!

Alisson Reinaldo Silva
  • 10,009
  • 5
  • 65
  • 83
  • 1
    Thanks! I really like this solution. I eventually modified the bootgrid.js to include a showPage() method that is basically a load() copy but setting the current row to the specified one – Rombus Mar 09 '17 at 03:56
  • Oh, that's nice, I thought about providing this option as an alternative, but take note the minified version won't work (unless you minify it by yourself and replace it, or just not use the minified version). In another answer about another feature I suggested doing something like `Grid.prototype.doSomething = function()` inside `bootgrid.js`. I guess they aren't going to release new versions, so you might not have problems updating the package and forgetting to add this code again. – Alisson Reinaldo Silva Mar 09 '17 at 04:08