分页插件pagination的使用
页面传过去的是这个页面的第几页和显示的数据条数,在后台进行数据的查询,然后进行返回,数据在前台显示后,就会调用分页插件进行分页的显示,每次分页查询都会将tbody清空,然后插入新的数据,这样就完成了分页的查询
前台页面:
//发送ajax请求进行分页查询
function displayData(pageNo){
/* //设置全选和取消全选的checkbox的checked状态为未选中
$("#checkOrCancelAll").attr("checked",false); */
var pageSize = $("#pageSize").val();
$.ajax({
url:"${pageContext.request.contextPath}/work/getByPage.action",
data:{
"pageNo":pageNo+1,
"pageSize":pageSize
},
type:"GET",
cache:false,//解决get请求页面缓存问题,另一种方式是使用时间戳
beforeSend:function(){
$("#message").text("正在进行分页查询请稍候...");
return true;
},
success:function(jsonObject){
//清空tbody
$("#roleInfoTBody").empty();
//{"total":100,"dataList":[{"id":"","code":"","name":"","remark":""},{},{},{}]}
if(jsonObject.total==0){
$("#message").text("没有符合条件的记录");
}else{
$("#message").text("查询结果如下:");
var htmlString = "";
//对分页查询的数据进行遍历 并拼接html字符串
$.each(jsonObject.dataList,function(i,n){
htmlString +="<tr>";
htmlString +="<td><input type='checkbox' value='"+n.id+"' name='id' onclick='controlFirstCheckbox();'/></td>";
htmlString +="<td>"+(i+1)+"</td>";
htmlString +="<td>"+n.code+"</td>";
htmlString +="<td>"+n.name+"</td>";
htmlString +="<td> "+n.remark+"</td>";
htmlString +="</tr>";
});
//将拼接好的字符串 追到TBody中
$("#roleInfoTBody").append(htmlString);
}
//集成jquery的pagination 完成翻页
$("#pagination").pagination(jsonObject.total, {//总记录条数
callback: displayData,//每次在翻页都会执行的回调函数 会传递参数 参数表示页码 (正常显示的页码-1)
items_per_page:pageSize, // 每页显示多少条记录
current_page:pageNo,//当前页码
link_to:"javascript:void(0)",//只保留超链接的样式,执行js代码,但是不跳转到任何资源
num_display_entries:10,//如果页码多的话,默认显示多少个页码
next_text:"下一页",
prev_text:"上一页",
next_show_always:true,//没有下一页的时候,按钮是否存在
prev_show_always:true,//没有上一页的时候,按钮是否存在
num_edge_entries:2,//页码多的时候用...省略
ellipse_text:"..."//指定省略符号
});
//总记录条数
$("#total").text(jsonObject.total);
//总页数
var pageCount = jsonObject.total%pageSize==0 ? jsonObject.total/pageSize:parseInt(jsonObject.total/pageSize)+1;
$("#pageCount").text(pageCount);
}
});
}
前台显示pageFoot.jsp页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<table width="100%" height="30" border="0" cellpadding="0"
cellspacing="0" class="page_table">
<tr>
<td width="8%" class="font_left">
数据:<span id="total"></span> 条
</td>
<td width="12" class="font_left">
第
</td>
<td width="375" class="font_left">
<input id="pageNo" type="text" size="2" maxlength="4"/>
/<span id="pageCount"></span> 页
<input type="image" border="0" src="images/go.gif" onclick="displayData($('#pageNo').val()-1)" />
<select id="pageSize" onchange="displayData(0)">
<c:forTokens items="${initParam.pageSizeString}" delims="," var="pageSize">
<option value="${pageSize}">每页${pageSize}条</option>
</c:forTokens>
</select>
</td>
<td width="478" class="font_right">
<div id="pagination"></div>
<input type="image" class="font_right"
onclick="displayData(0)"
src="images/botton_page_refresh.png"
border="0" />
</td>
</tr>
</table>
使用前台页面展示的方式:
<tr>
<td>
<%@include file="/common/pageFoot.jsp"%>
</td>
</tr>
</table>
补充:下面是需要的css样式和js文件
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/table.css" rel="stylesheet" type="text/css"/>
<link href="jquery/pagination/pagination.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/pagination/jquery.pagination.js"></script>
<script type="text/javascript" src="js/JsUtil.js"></script>
