jquery 简单分页

来源：互联网发布：600009的数据编辑：程序博客网时间：2024/06/06 15:00

分页使用

需导入分页所需JS文件，根据目录确定路径：

1、页面初始化创建分页：

jsp代码：

</div>

jquery代码：

//初始化分页'#pageId'可以为ID、class

newPage = new page('#pageId',{

//默认显示选中页码

current:1,

//是否显示每页显示条数选项

listFlag:false,

//数据总条数

listCount: 100,

//分页执行方法参数：current:选中页码；textCount:显示数量

backFn:function(current, textCount){

//分页执行方法

}

});

！注意：创建分页时不会执行backFn:function(current,textCount){}中的方法。

2、条件查询后再初始化分页：

（查询后数据数量可能会发生变化，需要重新初始化分页）

//重新初始化分页页码

newPage = new page('#page',{

//默认显示选中页码

current:1,

//是否显示每页显示条数选项

listFlag:false,

//数据总条数

listCount: 100,

//分页执行方法参数：current:选中页码；textCount:显示数量 flip(current, textCount)

}

});

！注意：重新初始化分页时不会执行backFn:function(current,textCount){}中的方法。如需要可以增加newPage.init();调用

代码如下：仅供参考

<div id="aa" class="seek-matter">
<h3>${title}</h3>
<div class="bord-bottom"><span></span></div>
<div id="info" class="seek-wrap">
<c:forEach items="${pageResultVo.data}" var="var" varStatus="vs">
<div class="seek-tabu">
<div class="jiantou"></div>
<div class="list1">${var.problemTitle}</div>
<div class="list-nei">
${var.problemDesc}
</div>
</div>
</c:forEach>
</div>

<input type="hidden" id="problemFaqRows" value="${pageResultVo.totalRows}"/>
</div>

<div class="plus-page" id="page1">
<div class="pages"></div>
<div class="pages-more"></div>
</div>
</div>

/*
* 页面内需要多个分页器，需要加for循环，以防分页器功能混乱
* .plus-page 为分页器最外层，也就是通过他的数量来判断有多少个分页器
* .pages 为插件创建分页的父类
* pageCount 页码数
* current 当前第几页
* listText 页码下拉的类名，是string类型的
* goBtn 跳转到指定页面的按钮对象
* listBtn 页码下拉对象
* backFn 回调函数，参数1:current为当前页码数；参数2：textCount为显示区域条数
*/
/* 单个分页器调用方式 */
var newPage;
$(function () {
var totalRows = $("#problemFaqRows").val();
//初始化分页
newPage = new page('#page1',{
current:1,
listCount: totalRows, //数据总数
textCount:10,//默认内容条数
areaCount:10,//初始化下拉选值
backFn:function(current, textCount){//current:选中页码；textCount:显示数量
console.log("current="+current);
console.log("textCount="+textCount);
flip(current, textCount)//分页执行的方法
}
});
});

//分页执行方法
function flip(current, textCount){
console.log("current="+current);
console.log("textCount="+textCount);
pageCond = new Object();
pageCond.start = textCount * (current-1); //取数据的开始位置
pageCond.limit = textCount; //取数据的数量
p = new Object();
p.pageCond = pageCond; //将取数据封装对象
var parentTitleId=${helpCenterFaqQueryVo.parentTitleId};
var title = $("#key").val();
p = new Object();
p.pageCond = pageCond;//将取数据封装对象
p.parentTitleId = parentTitleId;
p.problemTitle = title;
var str = JSON.stringify(p);
$.ajax({
type : "POST",//post方式请求
dataType : "html",//从服务器过来的是html页面
contentType : "application/json",//向服务器传的是json格式数据
url : "<%=basePath%>helpCenter/listFaqByConditionPage.ding",
data : str,
success : function(data) {
$("#aa").html(data);


}
});
}

由于不能上传附件，下面是jQuery.page.js文件的下载地址：

https://pan.baidu.com/s/1dE9HGid 密码 i6vm

0 0