分页显示的问题弄了两天,原因是我一开始是看的视频教程,但是那种方法过于繁琐且并不适合该项目,同组的哥们说了他的一个方法,觉得挺实用的。
当点击上图的节点的时候会向后台发送请求,会在数据库中查询出一个proList,这其中包含的是所有的产品,当没改动之前,这时候会把所有的产品显示出来。分页的思路就从这个proList中来的,为了分页,那我可以把一页要显示的内容放到一个临时list中去,当我点击下一页的时候,再次发送请求,把proList的下一部分的内容放到下一页,以此类推。
具体的实现是这样的:
这是第一次点击节点的时候就向后台(showTreeInfo.action),发送请求,在后台我定义了这样几个变量
默认的当前页为1,也就是当点击ztree的节点的时候显示的为第一页。然后会返回一个page.jsp,放到div中,page.jsp写了这样几个控件:
以下一页按钮为例,给下一页的button按钮一个onclick函数,当点击的时候就会触发,
function nextPage(){
var treeObj = $.fn.zTree.getZTreeObj("tree");//获取tree的对象
var sNodes = treeObj.getSelectedNodes();//获取当前选择的节点
var id = 0;
var pId = 0;
var pageNo = document.getElementById("pageNo").value;
var allPages = document.getElementById("allPages").innerHTML;//从text文本框中读出
if(pageNo !="")
{
pageNo = parseInt(pageNo);
allPages = parseInt(allPages);
if(pageNo>=allPages)
{
alert("已为最后一页");
}
else {
pageNo = pageNo + 1;
if(sNodes.length>0){
id = sNodes[0].id;
pId = sNodes[0].pId;
}
if(pId>10){
var Id=id-110;
var url="showTreeInfo.action?pageNo="+pageNo;
var args={"pId":pId,"id":Id,"time": new Date()};
$.post(url,args,function(data){
$("#content3").html(data);
})
}
}
}
}
当点击后,又会向
showTreeInfo.action发送请求,只不过这次会加上一个pageNo参数传过去,进入action后根据private int pageNo=1;//当前为第几页。
private int allRecords;//总的记录数。
private int allPages;//总页数。
private int perPage = 2;//每页显示的条数,这几个参数使用ExPage(自己编写的)查询出临时list,也就是下一页的内容返回到div中,这样,分页的效果就出来了,最后附上ExPage的函数:
public class ExPage
{
List<Product> productList = new ArrayList<Product>();
public List<Product> getList(int allRecords,int allPages,int perPage,int pageNo,List<Product> list)
{
if(pageNo == allPages)
{
for(int i=0;i<(allRecords-(pageNo-1)*perPage);i++)
{
productList.add(list.get((pageNo-1)*perPage + i));
}
}
else if(pageNo<allPages)
{
for(int i=0;i<perPage;i++)
{
productList.add(list.get((pageNo-1)*perPage + i));
}
}
return productList;
}
public int getAllPages(int allRecords,int perPage)
{
if((allRecords%perPage)==0){
return allRecords/perPage;
}else{
//System.out.println("Math.ceil(allRecords/perPage) "+Math.ceil(allRecords/perPage));
return (int) (Math.ceil(allRecords/perPage))+1;//Math.ceil(allRecords/perPage)向上取整
}
}
}