前端翻頁---jqPaginator.js
後臺每次返回10調資料
HTML:
<div class="pageDiv">
<div class="floatLeft totaldiv">
共<span class="totalpage"> 0 </span>條資料
</div>
<ul class="pagination floatLeft"></ul>
</div>
<script type="text/javascript" src="../../static/js/lib/jqPaginator.js"></script>
JS:
在請求成功,返回資料的success裡最下面呼叫翻頁
if(_s == 0){
fnPage(dt.all_article_num
}
/*
* 分頁
* tcount--總條數
* page--當前頁
*/
var _s = 0;
function fnPage(tcount,page){
tcount = parseInt(tcount);
$('.totalpage').html(tcount);
if(!tcount) {
$('.iplist').html('');
$('.pagination').html('');
return;
}
$('.pagination').jqPaginator({
totalCounts: tcount,
pageSize:10,
visiblePages:1,
currentPage: parseInt(page),
first: '<li class="first"><a href="javascript:void(0);">首頁<\/a><\/li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一頁<\/a><\/li>',
next: '<li class="next"><a href="javascript:void(0);">下一頁<\/a><\/li>',
last: '<li class="last"><a href="javascript:void(0);">末頁<\/a><\/li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}/ {{totalPages}}<\/a><\/li>', //<li class="page"><a href="javascript:void(0);"> {{page}} / {{totalPages}} <\/a><\/li>
onPageChange: function (num) {
_s++;
if(_s>1){
queryData(num);
}
}
});
}