jQuery分页插件twbsPagination

Posted 2020-10-16 依依大脚丫

说明：这里主要介绍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即可。