jQuery Grid Plugin - jqGrid

Rest assured, this does work!  My source  may be a bit more than you want, but I will send it to you via email if you contact me at john(dot)navratil(at)sbcglobal(dot)net.

Assuming you have the grid working as you like, the navgrid options are what you need.  Your HTML should include elements for both the grid and the pager (the navGrid), for example:

  <table id="grid" class="scroll">
  </table>
  <div id="pager" class="scroll" style="text-align:center;">
  </div>

You can chain the navgrid method after your jqGrid method call, like

            jQuery("#grid").jqGrid({
                ... your grid options here ....
                }).
            navGrid("#pager",
                {refresh: true, edit: false, add: true, del: true, search: true},
                { // edit
                 beforeSubmit: function() { alert('before edit submit'); }
                },
                { // add
                 beforeSubmit: function() { alert('before add submit'); }
                },
                { // delete
                beforeSubmit: function() { alert('before delete submit'); }
                }
                );

Note:  the navGrid method needs the id of the HTML element for the pager.  The next argument specifies which buttons to attach.  Here I do not have edit, but have selected add and deleted.  Following that are options for the edit, the add and the delete button, respectively.

I'm using jgQrid 3.4.  If you have the latest pdf documentation, refer to page 69.  It's the "Properties, Events and Methods" of the "Navigating" chapter.