CODEWITHSUNDEEP
javascriptjqgrid
davidjosepha
davidjosepha

Reputation: 117

JQGrid pager not showing until I change view

Here's my code:

<table id="employees"><tr><td></td></tr></table> 
<div id="pager"></div>

<script type="text/javascript">
    jQuery("#employees").jqGrid({
        datatype: "local",
        height: 250,
        colNames: ['Employee #', 'Name', 'Trade'],
        colModel: [
            { name: 'num', index: 'num', width: 100, sorttype: "int" },
            { name: 'name', index: 'name', width: 300 },
            { name: 'trade', index: 'trade', width: 80 },
        ],
        multiselect: true,
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: "num",
        sortorder: "desc",
        scroll: false,
        viewrecords: true,
        autoencode: true,
        height: 'auto',
        caption: "Equipment"
    });

    var mydata = [
        { num: "492", name: "Doug Anderson", trade: "WS" },
        { num: "696", name: "William Anderson", trade: "OP" },
        { num: "826", name: "Chris Autry", trade: "WF" },
        { num: "206", name: "Tom Beffa", trade: "OP" },
        { num: "799", name: "Glenn Bixler", trade: "LB" },
        { num: "360", name: "Pete Bober", trade: "OP" },
        { num: "7", name: "Scott Burgie", trade: "PFW" },
        { num: "476", name: "James Click", trade: "W" },
        { num: "775", name: "Bryan Darst", trade: "LB" },
        { num: "249", name: "Bob Dunham", trade: "LB" },
        { num: "10", name: "Tom Ekclund", trade: "WGF" },
        { num: "390", name: "Noel Edwards", trade: "W" }
    ];
    for (var i = 0; i <= mydata.length; i++)
        jQuery("#employees").jqGrid('addRowData', i + 1, mydata[i]);
</script>

My issue is that the pager shows, but says "1 out of 0" and then just shows all the rows instead of just 10. What's weird is that if I change the sort column once the page is loaded, or change the number of rows to show, it starts to work properly. For example, if I loaded the page and switched the number of rows to display to 20, it would show "1 out of 1" at the bottom, and then if I set it back to 10, I'd have 2 pages that I could switch through. I just don't get why it's not working immediately after page load.

Upvotes: 1

Views: 1259

Answers (1)

Oleg
Oleg

Reputation: 221997

The reason of the described problem is the usage of addRowData to fill the data. It's very bad, that the official jqGrid demo page contains very close code which can be found under "Loading Data" / "Array Data". The code contains not only small error (i <= mydata.length should be replaced to i < mydata.length), but it's *very ineffective. The demo page is very old. Starting with jqGrid 3.7 (see "New in version 3.7" / "Load array data at once") there are exist much more effective way: usage of data parameter.

Instead of filling the data in loop you can extend every item of mydata array with additional property id and use just data: mydata option. In the case the data will be first sorted (corresponds to sortname: "num", sortorder: "desc" which you use) and then the first page will be displayed. The user can use pager to navigate over the pages of data.

If the value of num which you displays is already unique (have different values in every row) then you don't need to add id property to mydata array. Instead of that you can add key: true property in the definition of num column in colModel. After that jqGrid will use the value from num column as "rowid" (the value of id attribute assigned to <tr> elements of the grid).

Additionally I recommend you to use gridview: true option in all your grids and remove index from colModel if you use the same value as name. By the way if you use datatype: "local" you must either remove index or specify the same values for index and name.

So the final code could be something like below

var mydata = [
        { num: "492", name: "Doug Anderson", trade: "WS" },
        { num: "696", name: "William Anderson", trade: "OP" },
        { num: "826", name: "Chris Autry", trade: "WF" },
        { num: "206", name: "Tom Beffa", trade: "OP" },
        { num: "799", name: "Glenn Bixler", trade: "LB" },
        { num: "360", name: "Pete Bober", trade: "OP" },
        { num: "7", name: "Scott Burgie", trade: "PFW" },
        { num: "476", name: "James Click", trade: "W" },
        { num: "775", name: "Bryan Darst", trade: "LB" },
        { num: "249", name: "Bob Dunham", trade: "LB" },
        { num: "10", name: "Tom Ekclund", trade: "WGF" },
        { num: "390", name: "Noel Edwards", trade: "W" }
    ];

$("#employees").jqGrid({
    datatype: "local",
    data: mydata,
    colNames: ["Employee #", "Name", "Trade"],
    colModel: [
        { name: "num", width: 100, key: true, sorttype: "int" },
        { name: "name", width: 300 },
        { name: "trade", width: 80 },
    ],
    multiselect: true,
    pager: "#pager",
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: "num",
    sortorder: "desc",
    viewrecords: true,
    autoencode: true,
    height: "auto",
    gridview: true,
    caption: "Equipment"
});

I fixed small bug: you specified height property twice (height: 250 and height: 'auto') which is an error.

Upvotes: 2

Related Questions