这几天一直搞layUI分页，很累，贴下成果
主要遇到的问题如下：
1.一直请求不到后台的数据，明明返回的是json数据，还是爆一个response的404的错误，后来把JSONArray的格式转换类换成JSONObject解决。
2.每次加载jsp页面时渲染数据表格，页数都会回到第一页，也就是说数据是第二页的，当前页数还是会显示第一页。解决方法：获取URL，获取数据的页数，传到page中。这里应该有更好的方法，我这方法很傻。
3.json返回的日期格式为Object，显示出来时一直是[object Object]直，使用new Date(time),一直出现invalid time。导致获取不到数据，出现了NaN-NaN-NaN，需要将Object类型的时间，转换成date类型才行
4.分页时只需要设置页面的跳转，table会根据url自动请求数据。
user.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<%@include file="/plug-in/main/main-js.jsp" %>
<link href="plug-in/js/web/background/user/css/user.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="layui-layout layui-layout-admin">
<jsp:include page="/WEB-INF/jsp/commom/head.jsp" flush="true"/>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<div style="background-color:#00C5CD;height:50px;">
<p class="user-text">用户信息管理</p>
<div class="layui-btn-group">
<div class="button">
<button class="layui-btn delete-many-btn"><i class="layui-icon"></i>批量删除</button>
</div>
<div class="button">
<button class="layui-btn add-btn"><i class="layui-icon"></i>添加</button>
</div>
<div class="button">
<button class="layui-btn freshen-btn"><i class="layui-icon"></i>刷新</button>
</div>
<div class="button">
<button class="layui-btn return-btn"><i class="layui-icon"></i>返回</button>
</div>
</div>
</div>
<div>
<table class="layui-table" lay-data="{url:'/why123/user/findUserAll', page:true, id:'idTest'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
<th lay-data="{field:'id', width:60, sort: true, fixed: true}">ID</th>
<th lay-data="{field:'userName', width:80}">用户名</th>
<th lay-data="{field:'password', width:80}">密码</th>
<th lay-data="{field:'headImg', width:80}">头像</th>
<th lay-data="{field:'gender', width:80}">性别</th>
<th lay-data="{field:'mobile', width:110}">手机号码</th>
<th lay-data="{field:'email', width:110}">电子邮箱</th>
<th lay-data="{field:'regDate', width:110,templet:'#date'}">注册时间</th>
<th lay-data="{field:'lastLogin', width:160}">最后一次登录时间</th>
<th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
</tr>
</thead>
</table>
</div>
<div id="userPage"></div>
</div>
</div>
</div>
<script type="text/javascript" src="plug-in/js/web/background/user/js/user.js"></script>
<script type="text/html" id="date">
{{dateFormat(d.regDate) }}
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行：<br>'+ JSON.stringify(data))
}
});
var $ = layui.$, active = {
getCheckData: function(){ //获取选中数据
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){ //获取选中数目
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
}
,isAll: function(){ //验证是否全选
var checkStatus = table.checkStatus('idTest');
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>user.js
/*//实现用户分页
//加载完元素后，再加载分页插件
$(function(){
var curr=getRequest();
console.log(curr);
$.ajax({
url:"user/userPage",
type:"post",
dataType:"json",
success:function(data){
layui.use('laypage', function(){
var laypage = layui.laypage;
laypage.render({
elem: 'userPage'
,count:data.count
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,curr:curr.page
,jump: function(obj,first){
if(!first){
window.location.href="user/forwardUser?page="+obj.curr;
};
}
});
});
}
});
});
//点击页面时获取当前页数
//获取url中的参数
function getRequest(){
var url=window.location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
$(function(){
var count='${count}';
var curr=getRequest();
layui.use('laypage', function(){
var laypage = layui.laypage;
laypage.render({
elem: 'userPage'
,count:count
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh','skip']
,curr:curr.page
,jump: function(obj,first){
if(!first){
window.location.href="user/forwardUser?page="+obj.curr;
};
}
});
});
});*/
Date.prototype.format = function (fmt) { //author: meizz
//console.log(this);
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
//var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}
function ChangeDateFormat(d)
{
var date=new Date(parseInt(d.time,10));
var month= date.getMonth() + 1 < 10 ? "0" +(date.getMonth() + 1) : date.getMonth() + 1;
var currentDate= date.getDate() < 10 ? "0" +date.getDate() : date.getDate();
return date.getFullYear()+ "-" +month + "-" +currentDate;
}
function dateFormat(value) {
var a=ChangeDateFormat(value);
return value ? new Date(a).format("yyyy-MM-dd"):"";
}