jQuery分页插件twbsPagination

来源:转载

说明:这里主要介绍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" id="pagination-on">
<ul id="visible-pages-example-on"></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 id="visible-pages-example-on" class="pagination"></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即可。

 

分享给朋友:
您可能感兴趣的文章:
随机阅读: