var pageIndex = 1 //当前页数
$(function(){
GetPageCount()//获取分页数量以及总的记录条数
$("#load").hide()//隐藏loading提示
$("#template").hide()//隐藏模板
ChangeState(0,1)//设置翻页按钮的初始状态
bind()//绑定第一页的数据
//第一页按钮click事件
$("#first").click(function(){
pageIndex = 1
ChangeState(0,1)
bind()
})
//上一页按钮click事件
$("#previous").click(function(){
pageIndex -= 1
ChangeState(-1,1)
if(pageIndex <= 1){
pageIndex = 1
ChangeState(0,-1)
}
bind()
})
//下一页按钮click事件
$("#next").click(function(){
pageIndex += 1
ChangeState(1,-1)
if(pageIndex>=pageCount)
{
pageIndex = pageCount
ChangeState(-1,0)
}
bind(pageIndex)
})
//最后一页按钮click事件
$("#last").click(function(){
pageIndex = pageCount
ChangeState(1,0)
bind(pageIndex)
})
//每页显示记录条数select事件
$("#pageSize").change(function(){
bind()
})
})
//AJAX方法取得数据并显示到页面上
function bind(){
$("#load").show()
var pageSize = $("#pageSize").val()
$.ajax({
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: "<%=basePath%>actionSmUser.do?method=listUser2",//要访问的后台地址
data: "pageIndex=" + pageIndex+"&pageSize="+pageSize,//要发送的数据
complete : function(msg){//msg为返回的数据，在这里做数据绑定
$("[id=ready]").remove()
var data = eval("("+msg.responseText+")")
$.each(data, function(i, n){
var row = $("#template").clone()
row.find("#userId").text(n.userId)
row.find("#userName").text(n.userName)
row.find("#depId").text(n.depId)
row.find("#createTime").text(n.createTime)
if(n.createTime !== undefined) row.find("#createTime").text(n.createTime)
row.find("#creator").text(n.creator)
row.find("#menusId").text(n.menusId)
row.find("#isValid").text(n.isValid)
row.attr("id","ready")//改变绑定好数据的行的id
row.appendTo("#datas")//添加到模板的容器中
})
$("[id=ready]").show()
SetPageInfo()
}
})
}
function ChangeDate(date){
return date.replace("-","/").replace("-","/")
}
//设置第几页/共几页的信息
function SetPageInfo(){
var pageCount = $("#pageCount").val()
var totalCount = $("#totalCount").val()
var pageSize = $("#pageSize").val()
$("#pageinfo").html(" 第<input class='default_pgCurrentPage' id='pageIndex' type='text' value='"+pageIndex+
"' style='width: 30px' /> 页" + "/" +"共 "+pageCount+"页"+
" 检索到 "+totalCount+"条记录，显示第 "+(pageIndex*pageSize-pageSize)+" 条 - 第 "+(pageIndex*pageSize)+" 条记录")
}
//AJAX方法取得分页总数
function GetPageCount(){
var pageSize = $("#pageSize").val()
$.ajax({
type: "get",
dataType: "text",
url: "<%=basePath%>actionSmUser.do?method=getPageCount",
data: "pageSize="+pageSize ,
async: false,
success: function(msg){
var data = eval("("+msg+")")
$("#pageCount").val(data[0].pageCount)
$("#totalCount").val(data[0].totalCount)
}
})
}
//改变翻页按钮状态
function ChangeState(state1,state2){
$("#first").attr("class","default_pgFirst default_pgBtn")
$("#previous").attr("class","default_pgPrev default_pgBtn")
$("#next").attr("class","default_pgNext default_pgBtn")
$("#last").attr("class","default_pgLast default_pgBtn")
if(state1 == 1) {
document.getElementById("first").disabled = ""
document.getElementById("previous").disabled = ""
}else if(state1 == 0){
document.getElementById("first").disabled = "disabled"
document.getElementById("previous").disabled = "disabled"
$("#first").attr("class","default_pgFirstDisabled default_pgBtn")
$("#previous").attr("class","default_pgPrevDisabled default_pgBtn")
}if(state2 == 1){
document.getElementById("next").disabled = ""
document.getElementById("last").disabled = ""
}else if(state2 == 0){
document.getElementById("next").disabled = "disabled"
document.getElementById("last").disabled = "disabled"
$("#next").attr("class","default_pgNextDisabled default_pgBtn")
$("#last").attr("class","default_pgLastDisabled default_pgBtn")
}
}
</script>
html页面代码如下：
复制代码代码如下:
<body>
<div>
<div>
<br />
<table id="datas" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px">
<tr class="fixheader">
<th width="14%">
用户ID</th>
<th width="14%">
用户名称</th>
<th width="14%">
所在科室</th>
<th width="14%">
创建时间</th>
<th width="14%">
创建人</th>
<th width="14%">
菜单集名称</th>
<th width="14%">
是否有效</th>
</tr>
<tr id="template" height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC' return true" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF' return true">
<td id="userId" class="tdc">
</td>
<td id="userName" class="tdc">
</td>
<td id="depId" class="tdc">
</td>
<td id="createTime" class="tdc">
</td>
<td id="creator" class="tdc">
</td>
<td id="menusId" class="tdc">
</td>
<td id="isValid" class="tdc">
</td>
</tr>
</table>
</div>
<div id="load" style="left: 0px position: absolute top: 0px background-color: red">
LOADING....
</div>
<div class="default_pgContainer" >
<div class="default_container">
<div class="default_pgPanel" id="skinDiv">
<table class="default_pgToolbar">
<tr>
<td class="black_pgCurrentPage">
<select id="pageSize" name="pageSize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</td>
<td>
<div id="first" class="default_pgFirst default_pgBtn" />
</td>
<td>
<div id="previous" class="default_pgPrev default_pgBtn" />
</td>
<td class="default_separator">
</td>
<td>
<div id="next" class="default_pgNext default_pgBtn" />
</td>
<td>
<div id="last" class="default_pgLast default_pgBtn" />
</td>
<td class="default_separator">
</td>
<td>
<span id="pageinfo"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="test"></div>
<input type="hidden" id="pageCount" style="width: 45px" />
<input type="hidden" id="totalCount" style="width: 45px" />
</body>
后台action中代码如下：
复制代码代码如下:
//分页获取用户信息
public void listUser2(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
RequestTool tool = new RequestTool(request)
Integer pageSize = tool.getIntParameter("pageSize")
Integer pageIndex = tool.getIntParameter("pageIndex")
ResultPage res = serviceSmUserImpl.findAllSmUsers(pageIndex, pageSize)
List<SmUser> smUserList = (List<SmUser>)res.getResult()
JSONArray array = new JSONArray()
JSONObject object
for(SmUser user:smUserList){
object = new JSONObject()
object.put("userId", user.getUserId())
object.put("userName",user.getUserName())
object.put("depId", user.getOrganCode())
object.put("createTime", user.getCreateTime())
object.put("creator", user.getCreator())
object.put("menusId", user.getMenusId())
object.put("isValid", (user.getValid().equals("1")?"有效":"无效"))
array.add(object)
}
AjaxTool.returnAjaxResponse(response, array.toJSONString())
}
//获取总的记录数和总页数
public void getPageCount(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
RequestTool tool = new RequestTool(request)
int pageSize = tool.getIntParameter("pageSize")
List<POJO> pojos = serviceSmUserImpl.findAll()
int pageCount = pojos.size()% pageSize > 0 ? (pojos.size()/ pageSize+1):(pojos.size()/ pageSize)
JSONArray array = new JSONArray()
JSONObject object = new JSONObject()
object.put("pageCount", pageCount)
object.put("totalCount", pojos.size())
array.add(object)
AjaxTool.returnAjaxResponse(response,array.toJSONString())
}
首先，最简单的先渲染一个表格，参考官方示例：
这里先讲讲一些渲染细节：
layui内部就是根据cols属性里面每项的field字段来输出数据（该字段跟后台返回的数据字段一致即可输出）。
另外，layui拼接html字符串的方式多次应用数组join方法的方式，这种方式值得安利一波：
否则用传统方式拼接html字符串就相形见绌了（不推荐）：
接着，看一下分页：
从图中可以看出，我们请求地址没加请求参数，layui自动帮我们添加了page，limit的请求参数，默认值分别为1, 10，这是开启了分页的缘故(page: true)。那么，请求参数名是否可以定制呢？答案是可以的，参考request属性：
同样，响应参数名也是可以定制的，参考response属性：
注意，以上只是定制了参数名字而已，接下来才是重头戏：定制数据格式，参考parseData属性：
parseData可以帮助我们定制好与layui对应的表格数据格式，从而输出表格，这是很有用的，毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式，我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页，下文提及的方式可不是真正的分页。
-----------------------快乐的分割线，前方jojo高能-----------------------
可能也有小伙伴无视了 request、response、parseData 三剑客，转而用起了data属性，过程如下：
拒绝了使用url属性请求，转用jquery ajax请求数据，最后再tableIns.reload({ data: res.data })一波，达成666操作。
这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。
因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。
