分页在JqGrid中不起作用

Question

I am using jQGrid Latest version in my project.following is complete configuration that i configured.

jQuery("#list").jqGrid( {
        url : 'Link.do?method=findAllBrand',
        mtype : 'GET',
        height : 350,
        datatype : "xml",
        colNames : [ 'Name' ],
        colModel : [ {
            name : 'name',
            index : 'name',
            width : 620
        } ],
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        sortname : 'id',
        sortorder : "desc",
        viewrecords : true,
        multiselect : true,
        imgpath : 'themes/base/images',
        caption : "Brand (s) Summary Grid",
        pager : #pager,
        cache : false,
        onSelectRow : function(id) {

        }
    });

I am getting following data in form of xml from server :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>4</total><records>75</records><row id="BRD00005"><cell>AEG</cell></row><row id="BRD00010"><cell>ARC</cell></row><row id="BRD00006"><cell>Aga</cell></row><row id="BRD00007"><cell>Allenzi </cell></row><row id="BRD00008"><cell>Amana</cell></row><row id="BRD00009"><cell>Andi</cell></row><row id="BRD00011"><cell>Arda</cell></row><row id="BRD00012"><cell>Ariston</cell></row><row id="BRD00013"><cell>Asko</cell></row><row id="BRD00014"><cell>Baumatic</cell></row><row id="BRD00015"><cell>Bendix</cell></row><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00016"><cell>Damani</cell></row><row id="BRD00017"><cell>Davell</cell></row><row id="BRD00018"><cell>Delonghi</cell></row><row id="BRD00019"><cell>Dishlex</cell></row><row id="BRD00020"><cell>Electrolux</cell></row><row id="BRD00021"><cell>Emilia</cell></row><row id="BRD00022"><cell>Euro</cell></row><row id="BRD00023"><cell>Eurolec</cell></row><row id="BRD00024"><cell>Euromaid</cell></row><row id="BRD00002"><cell>F&amp;P</cell></row><row id="BRD00027"><cell>FP</cell></row><row id="BRD00025"><cell>Fagor</cell></row><row id="BRD00026"><cell>Fisher And Paykel</cell></row><row id="BRD00028"><cell>Franke</cell></row><row id="BRD00030"><cell>GE</cell></row><row id="BRD00034"><cell>GVA</cell></row><row id="BRD00029"><cell>Gaggenau</cell></row><row id="BRD00031"><cell>Glem </cell></row><row id="BRD00032"><cell>Glem Gas</cell></row><row id="BRD00033"><cell>Glemgas</cell></row><row id="BRD00035"><cell>Haier</cell></row><row id="BRD00036"><cell>Hisense </cell></row><row id="BRD00037"><cell>Hitachi</cell></row><row id="BRD00038"><cell>Hoover</cell></row><row id="BRD00039"><cell>Hotpoint</cell></row><row id="BRD00040"><cell>IAG</cell></row><row id="BRD00041"><cell>Ilve</cell></row><row id="BRD00042"><cell>Indesit</cell></row><row id="BRD00043"><cell>Jenn Air</cell></row><row id="BRD00044"><cell>Kelvinator </cell></row><row id="BRD00045"><cell>Kleenmaid</cell></row><row id="BRD00047"><cell>LG</cell></row><row id="BRD00046"><cell>La Germania</cell></row><row id="BRD00048"><cell>Liebherr</cell></row><row id="BRD00049"><cell>Linea</cell></row><row id="BRD00050"><cell>Lofra</cell></row><row id="BRD00051"><cell>Maytag</cell></row><row id="BRD00052"><cell>Midea</cell></row><row id="BRD00053"><cell>Miele</cell></row><row id="BRD00054"><cell>NEC</cell></row><row id="BRD00055"><cell>Neff</cell></row><row id="BRD00056"><cell>Nobel</cell></row><row id="BRD00057"><cell>Omega</cell></row><row id="BRD00058"><cell>Onix</cell></row><row id="BRD00059"><cell>Panasonic </cell></row><row id="BRD00060"><cell>Robinhood</cell></row><row id="BRD00061"><cell>Sagi</cell></row><row id="BRD00062"><cell>Samsung</cell></row><row id="BRD00063"><cell>Seimen </cell></row><row id="BRD00064"><cell>Sharp</cell></row><row id="BRD00065"><cell>Simpson</cell></row><row id="BRD00066"><cell>Smeg</cell></row><row id="BRD00067"><cell>St George</cell></row><row id="BRD00068"><cell>Technika</cell></row><row id="BRD00069"><cell>Techno</cell></row><row id="BRD00070"><cell>Technogas</cell></row><row id="BRD00071"><cell>Teka</cell></row><row id="BRD00072"><cell>Thor</cell></row><row id="BRD00073"><cell>Vintec</cell></row><row id="BRD00074"><cell>Westinghouse</cell></row><row id="BRD00075"><cell>Whirlpool</cell></row></rows>

I have modified the pager parameter as suggested by user Oleg in the other post.but still the pager is not working as expected. initially it shows only the 10 data of the record , when i click on next it does nothing.

what did i do wrong

Thank You Mihir Parekh

Answer 1

The value of pager option must be quoted: pager : "#pager". You use datatype: "xml" without loadonce: true. In the case your server (url : 'Link.do?method=findAllBrand') is responsible for paging and sorting. If the user click on the next page new request to the server with the corresponding parameters page=2.

Typically the server should return the number of items which corresponds page and rows parameters. The XML response contains much more items. I suppose that the server returns all items independent from the requested page. In the case you should include loadonce: true. In the case the client code (JavaScript code of jqGrid) will do paging and sorting for you. If you use loadonce: true option you can remove the part

<page>1</page><total>4</total><records>75</records>

from the XML data returned from the server.

Additionally I would recommend you to consider to change to use JSON instead of XML whenever it's possible. In the case you could reduce the representation of items like

<rows>
<row id="BRD00022"><cell>Euro</cell></row>
<row id="BRD00002"><cell>F&amp;P</cell></row>
<row id="BRD00026"><cell>Fisher And Paykel</cell></row>
</rows>

to

[["Euro","BRD00022"],["F&P","BRD00002"],["Fisher And Paykel","BRD00026"]]

So you can reduce the size of transferred data.

Additionally, like I wrote you in the comment to your previous question, you should replace sortname : 'id' to sortname : 'name' bacsue your grid don't have the column with the name "id". The option sortorder : "desc" should be probably removed.

You should remove deprecated option imgpath and remove option cache which not exist in jqGrid too. Instead of that I strictly recommend you to add gridview: true option and autoencode: true. If you use autoencode: true you will don't need to use HTML encoding (converting F&P to F&P on the server side).

UPDATED: The demo demonstrate how the grid could looks like:

I included toolbar filter and advanced searching in the grid to show how easy one can implement the features if one uses loadonce: true.