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即可。