目录
介绍
接口介绍
参数:
返回数据结构
页面引入依赖
页面代码
分页code
调用代码
效果
后台分页代码
介绍
此服务包括几块内容
分页
ajax回调查询
模块
--标题
--搜索
--表格内容
--分页
具体使用的时候进行修改部分位置参数即可
使用中有些没有用到的全局变量，或方法，可以不用管，也可自己编辑一个
接口介绍
参数:
/**
*4.通过xx查询对应的xx数据接口
*
* @param pageNum 页数
* @param pageCount 条数
*
* @param xxCode 权限代码
*
* @return {state:success,totalCount:50,data:[{},{}]} or {state:error,info:run error}
*/
返回数据结构
{state:success,info:"run success" ,pageCount:909,data:[{},{},{}]}
页面引入依赖
jquery即可 到jquery官网获取 https://jquery.com/
页面代码
htmlcode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理首页</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">
<!-- 标题 -->
<div class="title"><label>在线用户管理</label></div>
<!-- 搜索 -->
<div class="search">
用户id：<input type="text" id="user_id">
访问ip：<input type="text" id="requestip">
用户名：<input type="text" id="username">
在线状态：<select id="onlineType">
<option value="">全部</option>
<option value="1">在线</option>
<option value="0">离线</option>
</select>
在线id:<input type="text" id="queryid">
<input type="button" id="submit" value="搜索" />
</div>
<!-- 内容 -->
<div class="infoIn"></div>
<!-- 分页 -->
<div class="pageUitl"></div>
</div>
<!-- 用户管理模块 -->
<div class="infobody" id="body2">
<!-- 标题 -->
<div class="title"><label>用户管理</label></div>
<!-- 搜索 -->
<div class="search">
用户id：<input type="text" id="queryid1">
手机号：<input type="text" id="userPhone">
用户名：<input type="text" id="userName">
<input type="button" id="submit" value="搜索" />
</div>
<!-- 内容 -->
<div class="infoIn"></div>
<!-- 分页 -->
<div class="pageUitl"></div>
</div>
</body>
<script src="../../lib/jquery.js"></script>
</html>
csscode
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;
}
js code
回调ajax方法
/**
* 获取数据服务 示例
var params = {
url:"/spccService/sendCheckCode",
data:{phoneNum:document.getElementById("phoneNum").value},
callback: function(data){alert(data=='success'?'发送成功':'发送失败');}
};
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("非法请求");
window.location = nowHtmlAddressorigin + "/index.html?login=false"
return;
}
params.callback(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
//错误信息
console.log(textStatus);
alert("异常");
window.location = nowHtmlAddressorigin + "/index.html?login=false"
return;
}
});
}
分页code
//公共数据
var superdata = {
//分页使用
pageUtil:' <label id="pagingUitl">'
+' <span>首页</span>'
+' <span>上一页</span>'
+' 第：<input type="text" id="numPage" style="width:30px;" value="1"/>'
+' 共:<label id="maxpage">1</label>页'
+' <span>跳至页</span>'
+' <span>下一页</span>'
+' <span>尾页</span>'
+' 当前页：<label id="nowLineNum">1</label>条'
+' 共:<label id="totalNum">1</label>条'
+'</label>',
};
/**
* 添加分页公共分页
*
* test 调用示例
*
* var pageParams ={
pageNum:pageNum //当前页数
,pageCount:pageCount //一页展示条数
,totalNum:totalNum //总条数
,id:"#infobody1 .pageUitl" //展示位置
,callbackFun:"getUserTask(params.pageNum,params.pageCount);"//回调方法
}
addPagingUitl(pageParams);
*
*
* @param {
* pageNum :页数
* ,pageCount: 一页条数
* ,totalNum :总条数
* ,id 展示位置
* callbackFun:回调方法
* } params
*
*
*/
var addPagingUitl = function(params){
//------------------------------------------1.获取参数---------------------
//当前页(必传)
var pageNum = params.pageNum==null?0:params.pageNum;
//每页展示条数(必传)
var nowPageConet = params.pageCount==null?10:params.pageCount;
//总条数(必传)
var totalNum = params.totalNum==null?16:params.totalNum;
//------------------------------------------2.渲染分页页面---------------------
//渲染页面 页数 一页条数 总条数 总页数
$(params.id).empty().append(superdata.pageUtil);
//------------------------------------------3.添加分页值---------------------
//添加分页参数值
$(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);//总条数
//------------------------------------------4.设置样式---------------------
//设置分页样式 居中
$(params.id+" #pagingUitl").css("margin-left",((nowbodyWidth-550)/2)+"px")
//------------------------------------------5.设置样式---------------------
//按钮事件
$(params.id+" #pagingUitl span").click(function(){
var nowText = $(this).text();
var pageNum = parseInt($(params.id+" #pagingUitl #numPage").val());//当前页
var maxpage = parseInt($(params.id+" #pagingUitl #maxpage").text());//总页数
if(nowText == "首页"){
params.pageNum = 1;
}else if(nowText == "上一页"){
if(pageNum == 1){
alert("已经是第一页了！");
return;
}
params.pageNum = pageNum-1;
}else if(nowText == "下一页"){
if(pageNum == maxpage){
alert("已经是最后一页了！");
return;
}
params.pageNum = pageNum+1;
}else if(nowText == "尾页"){
params.pageNum = maxpage;
}else if(nowText=="跳至页"){
if(pageNum>maxpage || pageNum==0){
alert("请输入正确页数！");
return;
}
params.pageNum = pageNum;
}
eval（params.callbackFun);//执行后回调方法
});
}
请求服务获取回调 加载表格 方法
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);
}
var getUserTaskCallback1 = function(data,pageNum,pageCount) { //展示表格
var params = {
element: "#body2 .infoIn",
data: data.data,
totalNum: data.totalCount,
thead: ["编号", "名称" , "手机号" , "创建时间" , "标签", "备注","密码登录失败","验证码登录失败 ","操作"],
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;
//表格内容info
var htmlTheadVal = "";
var htmlTbodyVal = "";
for (let i = 0; i < thead.length; i++) { //写入表格头
htmlTheadVal += '<th>' + thead[i] + '</th>';
}
for (let i = 0; i < data.length; i++) { //写入表格体
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"] + '">查看权限</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: "/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);
}对每种数据做操作可以进行判断做操作展示
可以添加具体的点击事件或各种事件
调用代码
var globalNowPage;
var globalNowPage.pageNum=1;
var globalNowPage.pageCount=10;
$("#body2 .search #submit").click(function(){//用户管理搜索
getUserTask1(globalNowPage.pageNum,globalNowPage.pageCount);
});
效果
后台分页代码
/**
* 查询支付订单
*
* @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());
// 组装数据
restJo.put("state", "error");
restJo.put("totalCount", "0");
restJo.put("data", "null");
return restJo;
}
}
ok
持续更新
