Jqgrid paging control, jqgrid Paging

Jqgrid paging control, jqgrid Paging

Two paging controls are used to handle paging issues. One is the jqgrid Control for processing tables, and the other is the custom jquery. page. js.

Jqgrid (http://blog.mn886.net/jqGrid/ Chinese controls tutorial, https://github.com/tonytomov/jqGrid this is github of controls)

Reference before use

<script type="text/javascript" src="js/jquery/jquery.min.js"></script><script type="text/javascript" src="js/jqgrid/jquery.jqGrid.min.js"></script><script type="text/javascript" src="js/jqgrid/i18n/grid.locale-cn.js"></script><br><script type="text/javascript" src="js/fenye.js"></script>

　　

Use jqgrid to first define a div segment in the body, which is a reserved position for the json data presentation in the background.

<div class="casetalbe">    <!-- main content -->    <div class="busi_main">         <table id="jqgrid"></table>         <div id="jqpage"></div>    </div></div>  

Next is the js part.

Define a showgrid () function to load data, and then reference the jqgrid method to load data.

$ ("# Jqgrid "). jqGrid ({url: 'Data/JSONData. json', datatype: "json", mtype: 'get', jsonReader: {root: "items", // set root name page: "currentpage ", // start page total: "totalpage", // total number of pages records: "recordcount", // total number of records repeatitems: false, id: "id" // corresponds to the table master.}, colNames: ["", "Medical Account", "application time", "patient ", "institution", "expert", "type", "condition", "status", "status", "Expected completion time", "operation"], colModel: [{name: 'id', index: 'id', width: 0, sortable: false, hi Dden: true, align: "center"}, // ID, hide {name: 'sultid', index: 'sultid', width: 0, sortable: false, hidden: true, align: "center"}, // The Consultid parameter, which is responsible for the following link address, hiding {name: 'cardno', index: 'cardno', width: 0, sortable: false, hidden: true, align: "center"}, // The cardno parameter. Hide {name: 'effectid', index: 'effectid', width: 0, sortable: false, align: "center"}, // medical No. {name: 'regdate', index: 'regdate', width: 100, sortable: false, align: "center "},/ /Submit the application to hide a row of data and add it to hidden: true {name: 'applydoctor ', index: 'applydoctor', width: 100, sortable: false, align: "center "}, // name {name: 'orderexpertunit ', index: 'orderexpertunit', width: 100, sortable: false, align: "center"}, // institution {name: 'rangedoctor', index: 'rangedoctor', width: 100, sortable: false, align: "center"}, // doctor {name: 'consulttype', index: 'sulttype', width: 100, sortable: false, align: "center"}, // diagnosis method, type {na Me: 'sultlevel', index: 'sultlevel', width: 100, sortable: false, align: "center"}, // severity {name: 'id', index: 'id', width: 100, sortable: false, formatter: status1Formatter, align: "center"}, // status {name: 'id', index: 'id ', width: 100, sortable: false, formatter: status2Formatter, align: "center"}, // status {name: 'id', index: 'id', width: 100, sortable: false, formatter: status3Formatter, align: "center"}, // status {name: 'id', index: 'id ', Width: 200, sortable: false, formatter: FinishTimeFormatter, align: "center"}, // estimated completion time {name: 'id', index: 'id ', sortable: false, formatter: handleFormatter, align: "center"} // operation], rowNum: 50, // number of data entries per page rowList: [50, 75, 100], // number of data entries displayed per page pager: '# jqpage', // The Grid is displayed in the div with id pager1 sortname: 'id', // viewrecords sorted by id: true, // display the total number of data records sortorder: "desc", // Reverse Order // caption: "", multiselect: false, // check box recordpos: 'Right ', // The position where the total record is displayed: Right height: $ (window ). height-90, // Row height: "100%" // height: document. body. clientHeight-3, hidegrid: false, // whether the Grid hides altRows: true, // altclass: 'ui-custom-back', // the class that changes the color of the row. // width: document. body. clientWidth-3, // width: $ (window ). width ()-100, autoWidth: true, // automatic column width shrinkToFit: true, // initialize the column width proportionally. If it is false, the column width is onSelectRow: null, // click ondblClickRow: null in the ondblClickRow method });

 

Jqgrid () is similar to ajax. url is the json address, datatype is the data type, mtype is the request type, and jsonReader is the parameter passed in json during the request, the title of the colName list. It should be pointed out that the data can be directly displayed, or the data can be displayed by calling a function, or even an operation is formed. For example, the status bar returns the calculated result, the operation column displays the clickable operation links.

The following is the entire showgrid () function.

Function showgrid () {var date = new Date (); $ ("# jqgrid "). jqGrid ({url: 'Data/JSONData. json', datatype: "json", mtype: 'get', jsonReader: {root: "items", // set root name page: "currentpage ", // start page total: "totalpage", // total number of pages records: "recordcount", // total number of records repeatitems: false, id: "id" // corresponds to the table master key here}, // colNames: ["", "remote medical No.", "Time of application for consultation ", "patient", "consultation institution", "consultation expert", "consultation type", "patient condition", "application", "Report ", "Quality Evaluation", "status"], colName S: ["", "remote medical number", "consultation application time", "patient", "consultation agency", "consultation expert ", "consultation type", "patient condition", "triage status", "consultation status", "deduction status", "Expected consultation completion time", "operation"], colModel: [{name: 'id', index: 'id', width: 0, sortable: false, hidden: true, align: "center"}, // ID, hide {name: 'sultid', index: 'sultid', width: 0, sortable: false, hidden: true, align: "center"}, // parameter CONSULTID, the following link addresses are used to hide {name: 'cardno', index: 'cardno', width: 0, sortable: false, hidden: true, align: "center "},/ /The cardno parameter hides the {name: 'effectid', index: 'effectid', width: 0, sortable: false, align: "center "}, // remote medical No. {name: 'regdate', index: 'regdate', width: 100, sortable: false, align: "center "}, // apply for hiding the data of a row by adding hidden: true {name: 'applydoctor ', index: 'applydoctor', width: 100, sortable: false, align: "center"}, // patient name {name: 'orderexpertunit ', index: 'orderexpertunit', width: 100, sortable: false, align: "center "}, // consultation institution {name: 'arrangedo CTOR ', index: 'rangedoctor', width: 100, sortable: false, align: "center"}, // consultant {name: 'sulttype', index: 'sulttype', width: 100, sortable: false, align: "center"}, // medical method, type {name: 'sultlevel', index: 'sultlevel', width: 100, sortable: false, align: "center"}, // severity {name: 'id', index: 'id', width: 100, sortable: false, formatter: status1Formatter, align: "center"}, // triage status {name: 'id', index: 'id', width: 100, sorta Ble: false, formatter: status2Formatter, align: "center"}, // consultation status {name: 'id', index: 'id', width: 100, sortable: false, formatter: status3Formatter, align: "center"}, // deduction status {name: 'id', index: 'id', width: 200, sortable: false, formatter: FinishTimeFormatter, align: "center"}, // expected consultation completion time {name: 'id', index: 'id', sortable: false, formatter: handleFormatter, align: "center"} // operation], rowNum: 50, // number of data entries per page rowList: [50, 75, 100], // per page Pager: '# jqpage', // The Grid is displayed in the div whose id is pager1. sortname: 'id', // viewrecords is sorted by id: true, // display the total number of data records sortorder: "desc", // Reverse Order // caption: "", multiselect: false, // check box recordpos: 'right ', // position of the total record: Right height: $ (window ). height-90, // Row height: "100%" // height: document. body. clientHeight-3, hidegrid: false, // whether the Grid hides altRows: true, // altclass: 'ui-custom-back', // the class that changes the color of the row. // width: document. body. cl IentWidth-3, // width: $ (window ). width ()-100, autoWidth: true, // automatic column width shrinkToFit: true, // initialize the column width proportionally. If false, the column width is onSelectRow: null, // click ondblClickRow: null in the ondblclickmethod); function status1Formatter (value, row, index) {var nr = "--"; var status = index. STATUS; if (status = "0") {nr = "triage";} else if (status = "1 ") {nr = "failed triage";} else if (status = "3") {nr = "undo";} else if (status = "4 ") {nr = "--";} else {nr = "passed by triage ";} var nr = '<a href = "#">' + nr + '</a>'; return nr;} function st Atus2Formatter (value, row, index) {var nr = "--"; var status = index. STATUS; if (status = "10") {nr = "under consultation";} else if (status = "11") {nr = "not approved ";} else if (status = "12") {nr = "consulted";} else if (status = "4") {nr = "--";} else {nr = "not consulted";} var nr = '<a href = "#">' + nr + '</a>'; return nr ;} function status3Formatter (value, row, index) {var nr = "--"; var status = index. STATUS; if (status = "12") {nr = "charged";} else {nr = "unpaid ";} var nr = '<a href = "#">' + nr + '</a>'; return nr;} function handleFormatter (value, row, index) {var status = index. STATUS; var nr = ""; // 12.12 The status is displayed according to the product design. if (status = 0 | status = 2 | status = 12 | status = 10) {nr = '<a title = "" href = "javascript: void (0);" onclick = "liulanFunc (\'' + index. ID + '\', \ ''+ index. CARDNO + '\', \ ''+ index. STATUS + '\') "class =" cust Om_link "> browse </a> ';} if (status = 1 | status = 4) {if (status = 4) {nr + = '<a title = "edit" href = "javascript: void (0);" onclick = "xiugaiFunc (\'' + index. ID + '\', \ ''+ index. CARDNO + '\', \ ''+ index. STATUS + '\') "class =" custom_link "> edit </a> ';} else nr + =' <a title =" modify "href =" javascript: void (0); "onclick =" xiugaiFunc (\ ''+ index. ID + '\', \ ''+ index. CARDNO + '\', \ ''+ index. STATUS + '\') "class =" custom_link "> modify </a> '; // nr + =" <Span class = 'nolink'> View Consultation Report </span> "; // nr + =" <span class = 'nolink'> rating </span> ";} else if (status = 10) {// nr + = "<span class = 'nolink'> modify </span> "; nr + = '<a title = "view Consultation Report" href = "javascript: void (0);" onclick = "baogaoFunc (\'' + index. ID + '\', \ ''+ index. CARDNO + '\') "class =" custom_link "> View the Consultation Report </a> '; // nr + = "<span class = 'nolink'> rating </span>";} else if (status = 11) {// nr + = "<span class = 'nolink'> repair Modify </span> "; nr + =" <span class = 'nolink'> View the consulting report </span> "; // nr + = "<span class = 'nolink'> rating </span>";} else if (status = 12) {// nr + = "<span class = 'nolink'> modify </span>"; nr + = '<a title = "view Consultation Report" href = "javascript: void (0); "onclick =" baogaoFunc (\ ''+ index. ID + '\', \ ''+ index. CARDNO + '\') "class =" custom_link "> View the consulting report </a> '; // nr + =' <a href =" javascript: void (0 ); "onclick =" zhipingFunc (\ ''+ index. ID + '\') "class = "Custom_link"> comment </a> ';} else {// nr + = "<span class = 'nolink'> modify </span> "; // nr + = "<span class = 'nolink'> View the consulting report </span> "; // nr + = "<span class = 'nolink'> rating </span>" ;}return nr;} function FinishTimeFormatter (value, row, index) {var nr = ""; if (index. REQUESTDATE = null) {nr = '--';} else {// var endtime = Date. parse (index. REQUESTDATE); // var startime = new Date (endtime-24*1000*60*60 * 3); // var year = startime. getFullYear (); // var month = startime. getMonth () + 1 <10? "0" + (startime. getMonth () + 1): startime. getMonth () + 1; // var date = startime. getDate () <10? "0" + startime. getDate (): startime. getDate (); // var start = year + "-" + month + "-" + date; var start = "XXXX-XX-XX"; if (index. ARRANGEDATE! = Null) {start = index. ARRANGEDATE;} nr = '<a href = "#">' + start + '--' + index. REQUESTDATE + '</a>';} return nr;} function baogaoFormatter (value, row, index) {var nr = ""; if (index. STATUS = 3) {nr = '<a href = "#" onclick = "baogaoFunc (\'' + index. ID + '\') "class =" custom_link "> browse </a> ';} else nr =' <a href =" # "> browse </a> '; return nr;} function zhipingFormatter (value, row, index) {var nr = ""; if (index. STATUS = 3) {nr = '<a href = "#" onclick = "zhipingFunc (\'' + index. MEETID + '\') "class =" custom_link "> not evaluated </a> ';} else nr =' -- '; return nr ;} $ ("# jqgrid "). jqGrid ('navgrid', '# jqpage', {edit: false, add: false, del: false, search: false}); doResize ();}

The showgrid () above is responsible for loading data. When querying data, the table data also changes. A search function is defined to generate a new table when the table changes.

Function search () {var tiaojian = ""; var date = new Date (); var meetID = $ ('# meetID '). val (); var applyDoctor = $ ('epplydoctor '). val (); var experterHospital =$ ('# experterHospital option: selected '). val (); var experters = $ ('# experters '). val (); var applybegin = $ ('epplybegin '). val (); var arrangeStatus = $ ('errangestatus '). val (); var huiZhenStatus = $ ('# huizhenstatus '). val (); var consultType = $ ('# co NsultType option: selected'). val (); if (meetID! = "") {Tiaojian = tiaojian + "& meetID =" + encodeURI (meetID);} if (applyDoctor! = "") {Tiaojian = tiaojian + "& applyDoctor =" + encodeURI (applyDoctor);} if (experterhospuri! = "") {Tiaojian = tiaojian + "& experterhospuri =" + encodeURI (experterhospuri);} if (experters! = "") {Tiaojian = tiaojian + "& experters =" + encodeURI (experters);} if (applybegin! = "") {Tiaojian = tiaojian + "& applybegin =" + encodeURI (applybegin);} if (arrangeStatus! = "") {Tiaojian = tiaojian + "& arrangeStatus =" + encodeURI (arrangeStatus);} if (huiZhenStatus! = "") {Tiaojian = tiaojian + "& huiZhenStatus =" + encodeURI (huiZhenStatus);} if (consultType! = "") {Tiaojian = tiaojian + "& consultType =" + encodeURI (consultType) ;}$ ("# jqgrid "). jqGrid ('setgridparam', {url: rootpath + gridUrl + '? Date = '+ date. getTime () + tiaojian, page: 1}). trigger ("reloadGrid"); // reload}

The page height also changes when the page is loaded. You can define a function to determine the height as needed to adjust the page layout.

/*** Page reresize */$ (window). resize (function () {doResize (); // jqgrid reset });

/*** Reset the jqGrid width and height when the page size changes */function doResize () {// jggrid setting // $ ("# jqgrid "). jqGrid ('setgridwidth ', $ (this ). parent (). width ()-5); // width setting \\$ ("# jqgrid "). jqGrid ('setgridwidth ', $ (window ). width ()-80); // width setting \\// $ ("# jqgrid "). jqGrid ('setgridwidth ', 800); // width setting \\// var I =$ ("[role = 'row']"). size (); // $ ("# jqgrid "). jqGrid ('setgridheight', $ (window ). height ()-1000 * (50-i); // height setting $ ("# jqgrid "). jqGrid ('setgridheight', $ (window ). height ()-360); // height setting // $ ("# jqgrid "). jqGrid ('setgridheight', 800); // height setting}

I will upload a demo later. Note that the jqgrid sorting only applies to the local json. In addition, complicated tables, such as merging tables, this may be difficult to process statistics.

Download demo