說明:這裡主要介紹jQuery的分頁插件twbsPagination。當然了還有其他的分頁插件,感覺上這個插件還是比較簡單易用的。 步驟一:建立page.jsp頁面,引用jquery.twbsPagination.js,page.js <script src="<%=basePath%>js/jqu ...
說明:這裡主要介紹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即可。