需求说明：
这里主要介绍jQuery的分页插件twbsPagination。当然了还有其他的分页插件，感觉上这个插件还是比较简单易用的。
步骤一：建立page.jsp页面，引用jquery.twbsPagination.js,page.js
<script src="<%=basePath%>js/jquery.twbsPagination.js"></script> <script src="<%=basePath%>js/page.js"></script>
<!--分页-->
<div class="dataTables_paginate paging_bootstrap pagination" ></ul>
</div>
<!--分页-->
注意：这里只绘制了一个分页的Div（首页，上一页，下一页，末页）其他的内容自行添加即可。
步骤三：建立page.js文件
var page=1;pagesize=2;//默认加载显示列表
var condition = '';//查询条件
var state=0;//0：所用用户，1：当前用户
$(function(){
//默认加载
IninPage();
});
//查询列表分页初始化
function IninPage(){
$('#visible-pages-example-on').remove();
$("#pagination-on").append('<ul >);
state = 0;
$.ajax({
type : "POST",
async: false,
url : "../../xxxxxxxxx/xxxxxxxxx.do",
dataType : "JSON",
data : {condition:condition,user_state:state},
success : function(msg) {
var total = msg.total;
var pagecount=Math.floor(total/pagesize)+(total%pagesize!=0?1:0);
pagecount=pagecount==0?1:pagecount;
$('#visible-pages-example-on').twbsPagination({
totalPages: pagecount,
visiblePages: pagecount<2?pagecount:2,
version: '1.1',
first:"首页",
prev:"上一页",
next:"下一页",
last:"末页",
loop:false,
href:"javascript:void(0)",
onPageClick:function(event,index){
page=index;
getInfoList();//数据查询列表
}
});
},error:function(){
alertLayer("操作失败","error");
}
});
}
//获取数据查询列表
function getInfoList(){
state = 0;
$.ajax({
type : "POST",
url : "../../xxxxxxxxx/xxxxxxxxx.do",
dataType : "json",
async:false,
data : {condition:condition,page:page,pagesize:pagesize,user_state:state},
success : function(msg) {
//该处省略数据显示部分代码
}
});
}
注意：page.js加载时我们要初始化上面几个必要的参数。
步骤四：ajax查询分页数据条数
IninPage();
步骤五：ajax查询分页数据列表
getInfoList();
总结：我们只需要提供几个必要的参数page（显示第几页），pagesize（每页显示条数），查询记录的条数、查询记录的列表即可实现分页功能。
在这个示例中我省略了数据查询部分，在具体应用的时候只需查询记录数total,和记录列表list即可。
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
