jqGrid plugin does not set the page number in URL

Question

I have problem with jqGrid plugin. If I am on e.g. 2nd page, and I want to change the sorting direction of any column, to the server goes as a URL param page=1 (but should be page=2) What's wrong ?

<table id="list" class="scroll " cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

$(function () {

    $("#list").jqGrid({
        url: '/Control/UsersGridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Name', 'User ID', 'Is Active', 'Last Action',  'Country'],
        colModel: [
  { name: 'Name', index: 'Name', width: 120, align: 'center', sortable: true, search: true },
  { name: 'UserID', index: 'UserID', width: 120, align: 'center', sortable: true, search: true },
  { name: 'IsActive', index: 'IsActive', width: 50, align: 'center', sortable: true, search: true },
  { name: 'LastAction', index: 'LastAction', width: 90, align: 'center', sortable: true, search: true },
  { name: 'Country', index: 'Country', width: 40, align: 'center', sortable: true, search: true }],
        pager: jQuery('#pager'),
        rowNum: 20,
        rowList: [5, 10, 20, 50],
        sortname: 'Name',
        sortorder: "desc",
        viewrecords: true,
        imgpath: '/scripts/themes/coffee/images',
        width: '800'
    });
});

Which version of jqGrid you use? I ask this because you use `class="scroll " cellpadding="0" cellspacing="0"` and `class="scroll" style="text-align:center;"` attributes in HTML and you use `imgpath` which are not used in versions of jqGrid published in the last 3 years. For example [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:upgrade_from_3.4.x_to_3.5#options) you will read that `imgpath` is deprecated in jqGrid 3.5. The current version of jqGrid is 4.4.1. — Oleg, Oct 22 '12 at 14:14
from my jgGrid.src.js file - @license jqGrid 4.3.2 - jQuery Grid — Tony, Oct 22 '12 at 14:19
I updated my answer with some small remarks to the code which could simplify it. The remarks are not concerned your main question. — Oleg, Oct 22 '12 at 15:17

score 2 · Accepted Answer · edited May 23 '17 at 12:03

The page number will be explicitly changed (see the line of code sortData function used inside of click event handler on the column header).

You can change the value inside of onSortCol event handler for example. You can get the value of current page directly from the corresponding <input> filed of pager: $(pagerIdSelector).find("input.ui-pg-input").val() where var pagerIdSelector = $(this).jqGrid("getGridParam", "pager").

In my opinion resetting the pager value to 1 is correct behavior. Let us you have some grid with 20 pages and the data are sorted by the first column in "asc" order. If the second page are displayed and the user clicks on the first column. In the case the sort order should be inverted to "desc". In the case the page number of the current page will be about 18 (it's 18 only if all pages are full with rows). If the user click on any other column and the grid should be sorted by another column then the rows displayed on the current page could have any location on the 20 pages sorted by the new criteria. Because of that jqGrid reset the value of page to 1 on every sorting of grid.

UPDATED: Some additional remarks to your code which are not important to your main question:

jqGrid replaces pager: jQuery('#pager') to pager: '#pager' during initializing time. So it has no seance to make unneeded search of element by id. One should better always use id-selector syntax for pager option.
imgpath option id deprecated and it will be just ignored by jqGrid. So you should remove it.
In the same way you call reduce HTML fragment needed for jqGrid to <table id="list"></table><div id="pager"></div>. All other attributes are deprecated and will be not used by jqGrid.
The properties sortable: true, search: true are default (see the documentation) and one should remove it. In the same way if you use index with the same value as name you can remove definition of index property. If you want use align: 'center' in the most of your columns you can reduce and simplify your code if you would change the default value for the align property. After the usage of cmTemplate: {align: 'center'} option of jqGrid (see here for more information) you can remove align: 'center' in all columns. After all the changes the definition of all items of colModel will be short and clear like { name: 'Name', width: 120 }.

jqGrid plugin does not set the page number in URL

1 Answers1