1、通过Jquery插件技术 2、后端传回数据为JSON 进行分页
这是一篇我在初学习过程中，遇到的动态数据分页显示的问题，前台采用Ajax传给后台，后台在访问数据库取出分页数据再转换为json格式传递给前台，前台再解析显示到表格中。在此写出我在做的过程中遇到的问题，可以让其他人少走弯路。
前台方面会用到分页的插件，这是传送地址，http://www.jq22.com/jquery-info15943，下载下来，这插件是没有数据交互的，我们要做的就是把数据从数据库取出来，转换成json再传给js。
然后开始，然后把下载下来的插件里面的文件都复制到项目里，就像这样
然后开始写后台代码，这个就是主要的后台处理数据并传json给前台。
public class index {
//已知数据
private int pageNum;//当前页
private int pageSize;//每页显示的数据条数
private int totalRecord;//总记录条数
private int totalPage;//总页数
/*
* 开始索引，也就是我们在数据库中要从第几行数据开始拿，有了
* startIndex和pageSize,就知道了limit语句的两个数据，
* 就能获得每页需要显示的数据了;
*/
private int startIndex;
private List<Logintimes> list;
public index(int pageNum,int pageSize,int totalRecord){
this.pageNum=pageNum;
this.pageSize=pageSize;
this.totalRecord=totalRecord;
if(totalRecord%pageSize==0){
this.totalPage=totalRecord/pageSize;
}else{
this.totalPage=totalRecord/pageSize+1;
}
this.startIndex=(pageNum-1)*pageSize;
}
public index() {
// TODO Auto-generated constructor stub
}
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalRecord() {
return totalRecord;
}
public void setTotalRecord(int totalRecord) {
this.totalRecord = totalRecord;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public List<Logintimes> getList() {
return list;
}
public void setList(List<Logintimes> list) {
this.list = list;
}
}这是index实体类，list存放的是从数据库得到的是分页数据集。
public String json() {
String message="";
loginMessageDaoImpl dao=new loginMessageDaoImpl();
List<Logintimes> list=new ArrayList();
index index;
JSONArray array=new JSONArray();
if(request.getParameter("pageNum")==null){
index=new index(1,15,dao.allSize());
JsonConfig config = new JsonConfig();
config.setExcludes(new String[]{"person"});//除去person属性
index.setList(dao.All(index.getStartIndex(), index.getPageSize()));
array=JSONArray.fromObject(index,config);
System.out.println("json:"+array.toString());
request.setAttribute("index", index);
message="success";
}else{
int pageNum=Integer.parseInt(request.getParameter("pageNum"));
int totalRecord=Integer.parseInt(request.getParameter("totalRecord"));
int totalPage=Integer.parseInt(request.getParameter("totalPage"));
index=new index(pageNum,15,totalRecord);
index.setList(dao.All(index.getStartIndex(), index.getPageSize()));
JsonConfig config = new JsonConfig();
config.setExcludes(new String[]{"person"});//除去person属性
array=JSONArray.fromObject(index,config);
System.out.println("json:"+array.toString());
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
message=null;
try {
response.getWriter().write(array.toString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return message;
}这是前台调用的类。那个判断语句if(request.getParameter(“pageNum”)==null)是用来处理第一次进入页面时需要给页面传的得到的数据库的数据总记录条数。
JsonConfig config = new JsonConfig();
config.setExcludes(new String[]{"person"});你的表中如何含有外键，就需要写这两句，这两句的作用就是在转换json时除去这个外键属性，否则在转换的时候会报错。如果你的表中没有外键，就须吧这两句删除。
前台方面：
在paging.js里需要改动如下地方：
在handles方法需要添加两个参数，以及ajax的调用方法，url的地址改成你的地址，以及里面的参数信息都改成你的项目你的数据信息。并且在该js中调用handles的方法参数别忘记改。
function handles(pageIndex,totalRecord,totalPage) {
lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page');
if (totalPages <= 5) {
that.options.callback(pageIndex);
return false;
}
if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
if (pageIndex == 2 || pageIndex == 1) distance = 0;
if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
pageSelect.css('transform', 'translateX(' + (-distance) + 'px)');
pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false);
pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false);
pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false);
pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false);
that.options.callback(pageIndex);
var xmlhttp;
var url="test!json?pageNum="+pageIndex+"&totalRecord="+ totalRecord+"&totalPage="+totalPage;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data=xmlhttp.responseText;
var json=eval（'{'+data+'}');
var list=json[0].list;
$("#dataGridTableJson tbody").html("");
for(var Logintimes in list){
$("#dataGridTableJson tbody").append('<tr>'
+'<td>'+list[Logintimes].id+'</td>'
+'<td>'+list[Logintimes].logintime+'</td>'
+'<td>'+list[Logintimes].ipmessage+'</td>'
+'<td>'+list[Logintimes].loginip+'</td>'
+'</tr>');
//alert(list[Logintimes].logintime);
}
}
};
xmlhttp.open("POST", url, false);
xmlhttp.send();
}这就是一个完整的分页技术，从前端到后台。哪里有问题的可以问。
3、后台通过转发的方式将实体类进行封转后进行分页
a、首先建立 一个PageBean 的实体类
public class PageBean<T> {
// 已知数据
private int pageNum;// 当前页，从请求那边传过来
private int pageSize;// 每页显示的数据条数
private int totalRecord;// 总的记录条数，查询数据库得到的数据
// 需要计算得来
private int totalPage;// 总页数，通过totalRecord和pageSize计算可以得来
// 开始索引，也就是我们在数据库中药从第几行数据开始拿，有了startIndex和pageSize
// 就知道了limit语句的两个数据，就能获得每页需要显示的数据了
private int startIndex;
// 将每页要显示的数据放在list集合中
private List<T> list;
// 分页显示的也是，比如在页面上显示123456页，start就为1 end就为5，这个也是算过来的
private int start;
private int end;
// 通过pageNum，pageSize，totalRecord计算的来tatalPage和startIndex
// 构造方法中将pageNum，pageSize， totalRecord获得
public PageBean(int pageNum, int pageSize, int totalRecord) {
this.pageNum = pageNum;
this.pageSize = pageSize;
this.totalRecord = totalRecord;
// 计算总页数
if (totalRecord % pageSize == 0) {
this.totalPage = totalRecord / pageSize;
} else {
this.totalPage = totalRecord / pageSize + 1;
}
if (pageNum > totalPage) {
this.pageNum = pageNum - 1;
}
if ((this.pageNum - 1) * pageSize < 0) {
this.startIndex = 0;
} else {
this.startIndex = (this.pageNum - 1) * pageSize;
}
this.start = 1;
this.end = 5;
// 显示页数的算法
// 显示5页
if (totalPage <= 5) {
// 总页数都小于5,nameend就为总页数的值了。
this.end = this.totalPage;
} else {
// 总页数大于5，那么就要根据当前页是第几页，来判断start和end为多少了
this.start = this.pageNum - 2;
this.end = this.pageNum + 2;
if (start <= 0) {
// 比如当前页是第1页，或者第2页，那么就不符合这个规则
this.start = 1;
this.end = 5;
}
if (end > this.totalPage) {
// 比如当前页是倒数第2页或者最后一页，也同样不符合上面这个规则
this.end = totalPage;
this.start = end - 5;
}
}
}
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
/**
* @return the startIndex
*/
public int getStartIndex() {
return startIndex;
}
/**
* @param startIndex
* the startIndex to set
*/
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
/**
* @return the totalRecord
*/
public int getTotalRecord() {
return totalRecord;
}
/**
* @param totalRecord
* the totalRecord to set
*/
public void setTotalRecord(int totalRecord) {
this.totalRecord = totalRecord;
}
/**
* @return the totalPage
*/
public int getTotalPage() {
return totalPage;
}
/**
* @param totalPage
* the totalPage to set
*/
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
/**
* @return the list
*/
public List<T> getList() {
return list;
}
/**
* @param list
* the list to set
*/
public void setList(List<T> list) {
this.list = list;
}
/**
* @return the start
*/
public int getStart() {
return start;
}
/**
* @param start
* the start to set
*/
public void setStart(int start) {
this.start = start;
}
/**
* @return the end
*/
public int getEnd() {
return end;
}
/**
* @param end
* the end to set
*/
public void setEnd(int end) {
this.end = end;
}
}b、后台Action方法中需要一个第几页的参数
/**
* 加载页面获取地块信息列表
*
* @param request
* @param response
*/
@RequestMapping("/getLands")
public void getLands(int pageNum, HttpServletRequest request, HttpServletResponse response) {
// 每页显示的记录数
int pageSize = 15;
// 获取分页所需要的数据
PageBean<Land> pageBean = biz.findLands(pageNum, pageSize);
request.setAttribute("pageBean", pageBean);
try {
request.getRequestDispatcher("转发到的页面").forward(request, response);
} catch (ServletException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}c、页面的处理
<div class="responsive-table" id="result">
<table class="table table-striped table-bordered" id="table"
style="width: 96%; margin-left: 2%;" cellspacing="0">
<thead>
<tr class="weight">
<td>地块编号</td>
<td>地块名称</td>
<td>地块地址</td>
<td>所属用户</td>
<td colspan="2">操作</td>
</tr>
</thead>
<tbody>
<c:if test="${pageBean.totalRecord == 0}">
<tr>
<td colspan="6">暂无数据...</td>
</tr>
</c:if>
<c:forEach items="${pageBean.list}" var="land">
<tr>
<td>${land.lId }</td>
<td>${land.landName }</td>
<td>${land.landAddress }</td>
<td>${land.user.username }</td>
<td style="cursor: pointer" onclick="editLand(${land.lId })">修改</td>
<td style="cursor: pointer"
onclick="removeLand(${land.lId },${pageBean.pageNum})">删除</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!-- 分页导航栏 -->
<div style="padding-top: 15px;">
<ul class="pagination" style="width: 40%; margin-left: 30%;">
<c:if test="${pageBean.totalPage >1 }">
<li class="fenye "><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=1">首页</a></li>
</c:if>
<%--如果当前页为第一页时，就没有上一页这个超链接显示 --%>
<c:if test="${pageBean.pageNum ==1}">
<c:forEach begin="${pageBean.start}" end="${pageBean.end}"
step="1" var="i">
<c:if test="${pageBean.totalPage!=1 }">
<c:if test="${pageBean.pageNum == i}">
<li class="fenye "><a href="#">${i}</a></li>
</c:if>
</c:if>
<c:if test="${pageBean.pageNum != i}">
<li class="fenye "><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=${i}">${i}</a></li>
</c:if>
</c:forEach>
<c:if test="${pageBean.totalPage>1 }">
<li class="fenye"><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=${pageBean.pageNum+1}">下一页</a></li>
</c:if>
</c:if>
<%--如果当前页不是第一页也不是最后一页，则有上一页和下一页这个超链接显示 --%>
<c:if
test="${pageBean.pageNum > 1 && pageBean.pageNum < pageBean.totalPage}">
<li class="fenye"><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=${pageBean.pageNum-1}">上一页</a></li>
<c:forEach begin="${pageBean.start}" end="${pageBean.end}"
step="1" var="i">
<c:if test="${pageBean.pageNum == i}">
<li class="fenye "><a href="#">${i}</a></li>
</c:if>
<c:if test="${pageBean.pageNum != i}">
<li class="fenye"><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=${i}">${i}</a></li>
</c:if>
</c:forEach>
<li class="fenye"><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=${pageBean.pageNum+1}">下一页</a></li>
</c:if>
<%-- 如果当前页是最后一页，则只有上一页这个超链接显示，下一页没有 --%>
<c:if test="${pageBean.pageNum == pageBean.totalPage}">
<c:if test="${pageBean.totalPage!=1 }">
<li class="fenye"><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=${pageBean.pageNum-1}">上一页</a></li>
</c:if>
<c:forEach begin="${pageBean.start}" end="${pageBean.end}"
step="1" var="i">
<c:if test="${pageBean.totalPage!=1 }">
<c:if test="${pageBean.pageNum == i}">
<li class="fenye "><a href="#">${i}</a></li>
</c:if>
</c:if>
<c:if test="${pageBean.pageNum != i}">
<li class="fenye"><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=${i}">${i}</a></li>
</c:if>
</c:forEach>
</c:if>
<%--尾页 --%>
<c:if test="${pageBean.totalPage >1 }">
<li class="fenye"><a
href="${pageContext.request.contextPath}/land/getLands.action?method=post&pageNum=${pageBean.totalPage}">尾页</a></li>
</c:if>
</ul>
</div>
<div style="width: 100%; padding-top: 15px;">
<div style="width: 150px; margin-left: 40%;">总共${pageBean.totalPage}页，当前第${pageBean.pageNum}页</div>
</div>
</div>注意点击右侧导航栏的热链接进入默认是传的参数为1.
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
