jqGrid pager problem after adding a row with addRowData

Question

var index = 'id';
var ajaxResponse = [{id: 1, name: 'John', email: 'john@doe.co.uk'}, {id: 2, name: 'Michael', email: 'michael@example.com'}];
$('#grid').addRowData(index, ajaxResponse);

After adding multiple rows one by one the pager doesn't stick to the per page limitation, also the pager reports page 1 of 0.

After i hit the refresh button from the footer of the grid, i see the correct number of rows per page, and the correct number of pages.

Any ideas on how to fix?

Thanks.

Answer 1

在添加行jQuery("#grid").trigger("reloadGrid");之后调用刷新

Answer 2

You don't posted the full code which you use. So I can only guess what you do.

If you have in ajaxResponse the full data which you use to fill the grid you can create the grid with data. You can use data: ajaxResponse together with gridview: true . In the case the whole grid will be created at once:

var mydata = [
        {id: 1, name: 'John', email: 'john@doe.co.uk'},
        {id: 2, name: 'Michael', email: 'michael@example.com'}
    ];

$("#list").jqGrid({
    datatype: 'local',
    data: mydata,
    colNames: ['Name', 'E-Mail'],
    colModel: [
        {name: 'name', width: 100},
        {name: 'email', width: 150}
    ],
    rowNum: 5,
    rowList: [5, 10, 20],
    pager: '#pager',
    gridview: true,
    rownumbers: true,
    sortname: 'name',
    sortorder: 'desc',
    caption: 'Just simple local grid',
    height: 'auto'
});

(see the demo here )

If you get the data from the server in JSON format like this

[
    {"id": 1, "name": "John",    "email": "john@doe.co.uk"},
    {"id": 2, "name": "Michael", "email": "michael@example.com"}
]

you can set url parameter to the server URL which provide the data and use

$("#list").jqGrid({
    url: 'Nicolae2.json',
    datatype: 'json',
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; },
        page: function () { return 1; },
        total: function () { return 1; },
        records: function (obj) { return obj.length; }
    },
    loadonce: true,
    colNames: ['Name', 'E-Mail'],
    colModel: [
        {name: 'name', width: 100},
        {name: 'email', width: 150}
    ],
    rowNum: 5,
    rowList: [5, 10, 20],
    pager: '#pager',
    gridview: true,
    rownumbers: true,
    sortname: 'name',
    sortorder: 'asc',
    caption: 'Just simple local grid',
    height: 'auto'
});

to fill the grid per Ajax directly from the server. The only restriction that you have to provide correct sorted data. So I changed the sortorder: 'desc' from the previous example to sortorder: 'asc' . See the second demo here .