JqGrid paging parameters and jqgrid paging Parameters

JqGrid paging parameters and jqgrid paging Parameters

HTML

<div class="ibox-content">                            <div class="jqGrid_wrapper">                                <table id="table_list_2"></table>                                <div id="pager_list_2" style="width: 100%"></div>                            </div>
</div>

Paging parameters in the pager_list_2 table where table_list_2 data is displayed

Js

$ (Document ). ready (function () {$. jgrid. defaults. styleUI = "Bootstrap"; $ ("# table_list_2 "). jqGrid ({height: 400, autowidth: true, shrinkToFit: true, colNames: ["Agent ID", "status", "Agent Name", "application date ", "Agent phone", "operator ID"], colModel: [{name: "AGENTID", index: "AGENTID", width: 60, align: "center "}, {name: "STATUS", index: "STATUS", width: 90, align: "center" },{ name: "AGTNAM", index: "AGTNAM", width: 100, align: "center" },{ name: "APPLYDAT", index: "APPLYDAT", width: 80, align: "center" },{ name: "AGTTEL ", index: "AGTTEL", width: 80, align: "center" },{ name: "USER_ID", index: "USER_ID", width: 80, align: "center"},], pager: "# pager_list_2", // It is the id viewrecords: true, hidegrid: false, url: "<% = path %>/findAction", // url processed in the background. action. do datatype: 'json', // returned data format rownumbers: true, // whether to display row number rowNum: 10, rowList: [10, 20, 30], // select the number of entries displayed on each page. jsonReader: {// you need to define jsonReader to correspond to the data returned by the server. root: "dataList", page: "currPage", total: "totalpages", records: "totalCount", repeatitems: false, id: "id "}})});

Note: jsonReader

JsonReader needs to be defined to correspond to the data returned by the server.

Important paging attribute attributes of jsonReader

root	Array containing actual data
page	Current page
total	Total number of pages
totalCount	Total number of records (total number of records)

 

 

 

 

 

 

 

Json format returned by the server

{Totalpages: "xxx ",

CurrPage: "yyy ",

TotalCount: "zzz ",

DataList :[

{AGENTID: "1", STATUS: "1", AGTNAM: "1", APPLYDAT: "1", AGTTEL: "1", USER_ID: "1 "},

{AGENTID: "1", STATUS: "1", AGTNAM: "1", APPLYDAT: "1", AGTTEL: "1", USER_ID: "1"}]

}

Data is automatically loaded using the name in colModel.

1. jqGrid initialization parameters

Http://blog.mn886.net/jqGrid/

2. jqGrid colModel Parameters

Http://blog.mn886.net/jqGrid/