请问如何用jquery 实现html页面的分页查询

2025-02-07 20:11:20

推荐回答（4个）

回答1：

首先你需要一个pageBean类，用来定义一些分页需要的数据！
public class PageBean {
private int pageCount = 0; // 总页数
private List pageData = null; // 当前页数据集
private int pageSize = 10; // 每页大小
private int currentPage = 1; // 当前页
private long totalRecord = 0; // 总记录数
private int beginIndex = 0; // 分页起始记录号
private int endIndex = 1; // 分页结束记录号

public int getPageCount() {
pageCount = (int)(totalRecord + pageSize -1)/pageSize;
return pageCount;
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
public List getPageData() {
return pageData;
}
public void setPageData(List pageData) {
this.pageData = pageData;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getCurrentPage() {
if (currentPage < 1) {
currentPage = 1;
}
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public long getTotalRecord() {
if (totalRecord < 0) {
totalRecord = 0;
}
return totalRecord;
}
public void setTotalRecord(long totalRecord) {
this.totalRecord = totalRecord;
}
public int getBeginIndex() {
beginIndex = (currentPage - 1) * pageSize+1;
return beginIndex;
}
public void setBeginIndex(int beginIndex) {
this.beginIndex = beginIndex;
}
public int getEndIndex() {
endIndex = currentPage * pageSize;
return endIndex;
}
public void setEndIndex(int endIndex) {
this.endIndex = endIndex;
}
}
页面上，使用jQuery的Ajax发送后台请求信息:
$.ajax({
type:"post",
url:"requestPage",
dataType:"json",
data:{这里就是封装数据的地方，比如你要到第二页的时候，在这之前要读取当前的页数，并进行适当的判断，是键值对的形式例如:"current":1,"pageSize":10},
success:function(data){
这里是返回json字符串
var jsonObj=$(data);
然后解析遍历json
$.each(data.pageData,function(index,item){
这个回调函数里面的第一个参数是下标，第二个参数是集合里面的单个对象
然后生成显示…………结束
});
}
}):

回答2：

那这个问题就稍微复杂些了，你必须通过自己的计算，每一页要显示多少条，可以分多少页，你如果是已经全部查询出数据了，那剩下的就是操作数组的问题了。

回答3：

楼主这个问题解决了吗？还有就是后台数据怎么获取的？

回答4：

这个还真有

Entries Per Page

下面是JS部分,放到最后(之前):

下面是pagescript.js

var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.table=function(){
function sorter(n){this.n=n; this.pagesize=10; this.paginate=0}
sorter.prototype.init=function(e,f){
var t=ge(e), i=0; this.e=e; this.l=t.r.length; t.a=[];
t.h=T$$('thead',T$(e))[0].rows[0]; t.w=t.h.cells.length;
for(i;i var c=t.h.cells[i];
if(c.className!='nosort'){
c.className=this.head; c.onclick=new Function(this.n+'.wk(this.cellIndex)')
}
}
for(i=0;i if(f!=null){var a=new Function(this.n+'.wk('+f+')'); a()}
if(this.paginate){this.g=1; this.pages()}
};
sorter.prototype.wk=function(y){
var t=ge(this.e), x=t.h.cells[y], i=0;
for(i;i t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].style.display='';
while(v.hasChildNodes()){v=v.firstChild}
t.a[i].v=v.nodeValue?v.nodeValue:''
}
for(i=0;i if(t.p==y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t.d=t.d?0:1}
else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}
var n=document.createElement('tbody');
for(i=0;i var r=t.r[t.a[i].o].cloneNode(true); n.appendChild(r);
r.className=i%2==0?this.even:this.odd; var cells=T$$('td',r);
for(var z=0;z }
t.replaceChild(n,t.b); if(this.paginate){this.size(this.pagesize)}
};
sorter.prototype.page=function(s){
var t=ge(this.e), i=0, l=s+parseInt(this.pagesize);
if(this.currentid&&this.limitid){T$(this.currentid).innerHTML=this.g}
for(i;i=s&&i };
sorter.prototype.move=function(d,m){
var s=d==1?(m?this.d:this.g+1):(m?1:this.g-1);
if(s<=this.d&&s>0){this.g=s; this.page((s-1)*this.pagesize)}
};
sorter.prototype.size=function(s){
this.pagesize=s; this.g=1; this.pages(); this.page(0);
if(this.currentid&&this.limitid){T$(this.limitid).innerHTML=this.d}
};
sorter.prototype.pages=function(){this.d=Math.ceil(this.l/this.pagesize)};
function ge(e){var t=T$(e); t.b=T$$('tbody',t)[0]; t.r=t.b.rows; return t};
function cp(f,c){
var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
i=Date.parse(f); n=Date.parse(c);
if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
return g>h?1:(g };
return{sorter:sorter}
}();

//
//