grid.history: A New, Free Integration for jqGrid and jQuery BBQ

Posted by on in Blogs
I recently finished an integration between the open source jqGrid and jQuery BBQ libraries. I have released my integration as open source, as well. As with both projects, it is dual-licensed under the MIT and GPL licenses.

jqGrid is a JavaScript grid component with many useful features. I have previously explained how to use it with ASP.NET MVC.

jQuery BBQ is a library which helps you manage proper functionality of the web browser's back and forward buttons by changing the fragment (hash) of the URI. Using my integration means that you can have a jqGrid on a web page and the back and forward buttons will work as expected.

To be specific, when you first load a certain page, the grid will probably be on page 1. You could click the next page button on the grid to go to page 2. Without my integration, clicking the back button would not take you back to page 1. With my integration, it will. Similarly, I support the sort and records per page combo box. You can of course extend this yourself to track other grid features.

The image above shows a demo page I've prepared, which you try for yourself. The grid on the left does not use the history plug-in. The grid on the right does. Note that when you page, sort, or change the number of rows shown in the grid with the history, the URI fragment also changes.

I have contributed my plug-in back to the jqGrid project. You can get the source from github.


  • Guest
    Jolyon Smith Friday, 16 July 2010

    I hate to have to tell you, but when I looked at your demo page both grids did exactly the same thing when I "Next Page'd" four times then clicked "Back" in my browser...

    ... nothing.

    Both grids stayed on Page 4. After I "Back'd" four times I backed off the grid page and back to the "Demo intro" page.

    Browser: ChromePlus

  • Guest
    Gustavo Saturday, 17 July 2010

    Don't work. Opera 10.60.3422

  • Guest
    Vincent Bergeron Wednesday, 21 July 2010

    I think the line:
    var newOptions = optionsWithHistory(options);

    should be
    var newOptions =, options);

    because on my system, when the optionsWithHistory method is called, the "this" variable is the current window in the method and not the grid.

    Good job by the way

  • Guest
    Michel Tuesday, 17 August 2010

    Hi, you're my held -)
    I looked for a way to do this. I founded a way to persist this in cookies, but... then I had to reload the grid.
    Now it goes very well... But do you have a way to add the server filter params ?
    Thank you in advance,

  • Guest
    Michel Tuesday, 17 August 2010

    Sorry if you didn't understand... (I'm french speaking -)
    So, on the jqGrid demos (, you have the integrated search toolbar as from version 3.5. This is the jqGrid filtertoolbar. Those params are given to the cfc (I work with coldfusion) with the 'other' parameters, page, rows... and take the parameter name from the colModel.
    I tried with the persist.concat, but didn't succeeded (but i'm not a javascript guru -)

    Thank you for your interest,

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: