directory
introduce
The interface is introduced
Parameters:
Return data structure
Page importing dependencies
Page code
htmlcode
csscode
js code
Callback ajax methods
Paging code
Request the service to get the callback load table method
The calling code
The effect
Background paging code
introduce
This service consists of several pieces
paging
Ajax callback query
The module
– title
– search
— Table content
– page
Specific use of the time to modify part of the location parameters
Use some not used global variables, or methods, you can ignore, can also edit a
The interface is introduced
Parameters:
/** *4. Query the corresponding XX data interface through XX ** @param pageNum Number of pages * @Param pageCount number ** @param xxCode Permission code ** @return {state:success,totalCount:50,data:[{},{}]} or {state:error,info:run error} */Copy the code
Return data structure
{state:success,info:"run success" ,pageCount:909,data:[{},{},{}]}
Copy the code
Page importing dependencies
Jquery to obtain jquery.com/
Page code
htmlcode
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, </title> <link rel="stylesheet" type="text/ CSS "href=".. /.. /css/public.css" /> <link rel="stylesheet" type="text/css" href=".. /.. /css/admin/indexData.css" /> </head> <body> <! <div class=" infoBody "id="body1"> <! - the title -- -- > < div class = "title" > < label > online user management < / label > < / div > <! User id: <input type="text" id="user_id"> Access IP: <input type="text" id="requestip"> user name: <input type="text" id="username"> <select id="onlineType"> <option value=""> all </option> <option value="1"> Online </option> <option value="0"> Offline </option> </select * from 'submit'; </select * from 'submit'; </select * from 'submit'; <div class="infoIn"></div> <! Class ="pageUitl"></div> </div> <! - the user management module -- -- > < div class = "infobody" id = "body2" > <! - the title -- -- > < div class = "title" > < label > user management < / label > < / div > <! <div class="search"> User ID: <input type="text" id="queryid1"> <input type="text" id="userName"> <input type="button" id="submit" value=" search "/> <div class="infoIn"></div> <! - page - > < div class = "pageUitl" > < / div > < / div > < / body > < script SRC = ".. /.. /lib/jquery.js"></script> </html>Copy the codecsscode
body{ margin:0; padding:0; } span{ padding:2px 10px; border:1px solid #fff; border-radius:2px; cursor:pointer; } .infobody{ background:#000; } .infobody .title{ height:30px; line-height:30px; background:rgb(197, 194, 194); padding-left:10px; } .infobody .search{ line-height:30px; background:rgb(216, 211, 211); /* padding-left:10px; */ float: left; width: 100%; } .infobody .search input{ width:100px; } #onlyUserAddDept{ float: right; cursor:pointer; } #adminAddDeptopenpopup{ float: right; cursor:pointer; } .infobody .infoIn{ float: left; width: 100%; background:rgb(216, 211, 211); } .infobody .pageUitl{ float: left; width: 100%; height:50px; line-height:50px; background:rgb(167, 163, 163); } .adddeptPopupInfo{ background:#8c8686; height:300px; width:100%; text-align:center; } table{ width:100%; text-align:center; line-height:30px; } #onlyUserAlldept{ display:none; }Copy the code
js code
Callback ajax methods
/ * * * to get the data service example var params = {url: "/ spccService sendCheckCode", data:{phoneNum:document.getElementById("phoneNum").value}, callback: function(data){alert(data=='success'? 'send succeeded ':' send failed '); }}; getService(params); * * @param {*} params */ var getService = function(params) { $.ajax({ type: "POST", url: ServerUrl + params.url, data: params.data, async: true, //crossDomain: true, // xhrFields: {withCredentials: true}, success: Function (data) {if (data == "illegal token") {alert(" illegal token"); window.location = nowHtmlAddressorigin + "/index.html? login=false" return; } params.callback(data); }, error: function(XMLHttpRequest, textStatus, errorThrown) {// status code console.log(xmlHttprequest.status); / / state console. The log (XMLHttpRequest. ReadyState); // Error message console.log(textStatus); Alert (" abnormal "); window.location = nowHtmlAddressorigin + "/index.html? login=false" return; }}); }Copy the code
Paging code
Var superdata = {// pageUtil:' <label id="pagingUitl">' +' <span> </span>' +'& NBSP; <span> <span> <span> < p style="width:30px; value="1"/>' +' <label id=" maxPage ">1</label> <span> jump to page </span>' +'& NBSP; <span> next page </span> <span> <span> '+'& NBSP; Current page: <label id="nowLineNum">1</label> bar '+'& NBSP; Total: < label id = "totalNum" > 1 < / label > '+' < / label > '}; Var pageParams ={pageNum:pageNum // Number of current pages,pageCount:pageCount // Number of pages displayed on a page , totalNum: totalNum / / the total number of article, id: "# infobody1. PageUitl" / / placement, callbackFun: "getUserTask (params. PageNum, params, pageCount);" } addPagingUitl(pageParams); * * * @param {* pageNum: number of pages *,pageCount: Params * */ var addPagingUitl = function(params){callbackFun: function(params){ / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 1. To obtain parameters -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / the current page (will pass) var pageNum = params. PageNum = = null? 0:params.pageNum; // Number of displays per page (mandatory) var nowPageConet = params.pageCount==null? 10:params.pageCount; Var totalNum= params.totalNum==null? 16:params.totalNum; / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 2. Rendering paging page -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / render a page article pages a page number to the total number of article total number of pages $(params. Id). The empty () append (superdata. PageUtil); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 3. Add paging value -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / add paging parameters value $(params. Id + '# # pagingUitl numPage). Attr (" value ", pageNum); $(params.id+' #pagingUitl # maxPage ').text(math.ceil (totalNum/nowPageConet)); $(params.id+' #pagingUitl #nowLineNum').text(nowPageConet); $(params.id+' #pagingUitl #totalNum'). Text (totalNum); / / the total number of article / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 4. Set the style -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / set the page style Center $(params. Id + "# pagingUitl"). The CSS (" margin - left ", ((nowbodyWidth - 550) / 2) + "px") / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 5. Set the style -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / button event $(params. Id + "# pagingUitl span"). Click (function () {var nowText = $(this). The text (); var pageNum = parseInt($(params.id+" #pagingUitl #numPage").val()); Var maxPage = parseInt($(params.id+" #maxpage").text()); // Total page count if(nowText == "home "){params.pagenum = 1; }else if(nowText == "新 页"){if(pageNum == 1){alert(" 新 页"); ); return; } params.pageNum = pageNum-1; }else if(nowText == "next page "){if(pageNum == maxPage){alert(" last page already!" ); return; } params.pageNum = pageNum+1; }else if(nowText == "backpage "){params.pageNum = maxPage; } else if (nowText = = "skip to page") {if (pageNum > maxpage | | pageNum = = 0) {alert (" please enter the correct number of pages!" ); return; } params.pageNum = pageNum; } eval(params.callbackFun); // execute after callback method}); }Copy the code
Request the service to get the callback load table method
Var getUserTask1 = function(pageNum,pageCount) {var params = {url: "/deptService/qyglservice/adminQueryUserData", data: { pageNum: pageNum ,pageCount: pageCount ,userPhone :$("#userPhone").val() ,userName :$("#userName").val() ,queryid :$("#queryid1").val() }, callback: function(data) { getUserTaskCallback1(data,pageNum,pageCount); }}; getService(params); Function (data,pageNum,pageCount) {var params = {element: "# body2.infoin ", data: data.data, totalNum: data.totalCount, thead: [" number ", "name", "phone number", "creation time", "tag", "note", "password login fails", "login authentication code failure", "operation"], tbody: ["id" , "name", "phone", "create_time", "label", "remarks","password_login_number","phone_check_code_login_number"], callback: function() { console.log(data) } } // public.tableUitl(params); Var element = params.element, data = params.data, thead = params.thead, totalNum= params.totalnum, tbody = params.tbody; // callback=params.callback; // Table contents info var htmlTheadVal = ""; var htmlTbodyVal = ""; for (let i = 0; i < thead.length; I++) {/ / written form head htmlTheadVal + = '< th >' + thead [I] + '< / th >'; } for (let i = 0; i < data.length; I++) {// write the table body htmlTbodyVal += '<tr>'; for (let j = 0; j < tbody.length; j++) { var nowHtml = ""; if (tbody[j].indexOf('time') ! = -1) { nowHtml = formatDateTime(data[i][tbody[j]]); }else if(tbody[j]=="phone"){ nowHtml = data[i][tbody[j]]+"****"; }else{ nowHtml = data[i][tbody[j]] == null ? " " : data[i][tbody[j]]; } htmlTbodyVal += '<td><div>' + nowHtml + '</div></td>'; If (j = = tbody length - 1) {nowHtml = '< span idkey = "' + data [I] (" id ") + '" > view permissions < / span >'; htmlTbodyVal += '<td><div>' + nowHtml + '</div></td>'; } } htmlTbodyVal += '</tr>'; } var htmlThead = "<thead><tr>" + htmlTheadVal + "</tr></thead>"; var htmlTbody = "<tbody>" + htmlTbodyVal + "</tbody>"; var htmlTable = "<table>" + htmlThead + htmlTbody + "</table>"; $(element).empty().append(htmlTable); $(element + ' span').click(function() { var idkey = $(this).attr("idkey"); nowOnlyQueryUserid = idkey; Var params = {url: / / view version specific data "/ deptService qyglservice/queryUserAllDept", data: {pageNum: 1, pageCount: 200, queryId: idKey}, callback: function(data) {clearAllBodyOpenOnly("#onlyUserAlldept"); getUserTaskDeptCallback1(data); }}; getService(params); }); Var pageParams ={pageNum:pageNum,pageCount:pageCount,totalNum:totalNum,id:"# body2.pageuitl" ,callbackFun:"getUserTask1(params.pageNum,params.pageCount);" } addPagingUitl(pageParams); }Copy the codeThe manipulation of each type of data can be judged and displayed
You can add specific click events or various events
The calling code
var globalNowPage; var globalNowPage.pageNum=1; var globalNowPage.pageCount=10; $(" # # body2. Search the submit "). Click (function () {/ / users to manage search getUserTask1 (globalNowPage. PageNum, globalNowPage, pageCount); });Copy the code
The effect
Background paging code
/** * query payment order ** @param userid * @param queryid * @param relation_order_id * @param subject * @param relation_table * @param pageCount * @param pageNum * * @return JSONObject */ public JSONObject queryOrderTask(String userid, String queryid, String relation_order_id, String subject, String relation_table, int pageNum, int pageCount) { JSONObject restJo = new JSONObject(); try { String datasSql = "select * from "; String countSql = "select count(id) totalCount from "; String whereSql ="pay_order_0 where userid='"+userid+"' "; if(! relation_order_id.equals("")){ whereSql += " relation_order_id='"+relation_order_id+"' "; Int totalList = aod.queryTotalApiInfo(countSql+whereSql); log.info(userid+ "query pay_order_0 count success"); System.out.println(totalList); WhereSql += "ORDER BY create_time desc "; whereSql += " limit " + (pageNum - 1) * pageCount + "," + pageCount+ " ;" ; List<HashMap<String, Object>> list = aod.queryApiInfo(datasSql+whereSql); log.info(userid+ "query pay_order_0 data success"); Restjo. put("state", "success"); restJo.put("totalCount", totalList); restJo.put("data", list); return restJo; } catch (Exception e) { log.info(userid+ "query pay_order_0 error:"+ e.toString()); // Assemble data restjo. put("state", "error"); restJo.put("totalCount", "0"); restJo.put("data", "null"); return restJo; }}Copy the code
ok
Continuously updated