这个页数多了没有省略号的
<link rel="stylesheet" href="../css/bootstrap.css">
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/bootstrap.min.js"></script>
<!--<script type="text/javascript" src="../script/bootstrap-paginator.js"></script>-->
<div class="content"></div>
<div class="page" id="pagination">
<ul class="pagination pagination-sm"></ul>
</div>
//只要分页导航，不要可设置每页显示几条记录----------------------------------------------
<script type="text/javascript">
var pcard_number;//卡号
var pCardId;
//总记录数
var totalNum = 0;
//总页数
var totalPage = 0;
//默认每页显示数
var avageNum = 10;
//默认显示第一页
var currentPage = 1;
apiready = function() {
pcard_number = api.pageParam.pcard_number;
$(".pcard_number").text(pcard_number);
pCardId = api.pageParam.pCardId;
getUserList(currentPage,avageNum);
}
//与后台交互获取数据，异步加载到页面上
function getUserList(pageNum,pageSize){
currentPage = pageNum;
api.showProgress({
style: 'default',
animationType: 'fade',
title: '获取数据中...',
text: '先喝杯茶...',
modal: false
});
api.ajax({
url: api.getPrefs({
sync: true,
key: 'host_address'
}) + '/open/PhysicalCard/expenseRecord',
method: 'post',
// dataType: 'json',
contentType:'application/x-www-form-urlencoded',
data: {
values: {
pCardId: pCardId,
pageNum: pageNum,
pageSize: pageSize
}
}
}, function(ret, err) {
api.hideProgress();
if (ret) {
console.log(JSON.stringify(ret));
if (ret.code == 0) {
var data = ret.data;
totalNum = data.totalNums;
totalPage = data.totalPages;
var expensesHistories = data.expensesHistories;
var html = '';
for(var i=0;i<expensesHistories.length;i++){
html +=
'<div class="flex flex_around flex_col_center recordBox" data-id="'+expensesHistories[i].id+'">'+
'<span class="recordDate">'+expensesHistories[i].create_time+'</span>'+
'<span class="recordTimes">'+expensesHistories[i].consumption+'次</span>'+
'</div>'
}
$(".content").html(html)
if($('#pagination ul').html().length == 0){
console.log("首次加载列表时才渲染除分页导航栏");
initPagination(totalPage,totalNum);
}
} else {
api.toast({
msg: JSON.stringify(ret),
duration: 2000,
location: 'bottom'
});
}
} else {
api.toast({
msg: JSON.stringify(err),
duration: 2000,
location: 'bottom'
});
}
});
}
//初始化分页栏
function initPagination(totalPage,totalNum) {
console.log(totalPage+"----------"+totalNum);
$('#pagination ul').html(" ");
// $('#pagination').append(
// '<ul class="pagination" style="display:inline;">' +
// '<span style="float: right;">每页显示' +
// '<select id="dataNum">' +
// '<option value="1">1</option>' +
// '<option value="2">2</option>' +
// '<option value="3">3</option>' +
// '</select>条记录,总共有' + totalPage + '页，总共' + totalNum + '条记录</span>' +
// '</ul>'
// )
// οnclick="getUserList('+ (currentPage - 1) + ','+ avageNum + ')"
$("#pagination ul").append(
'<li><a href="javascript:void(0);" id="prev">上一页</a></li>'
)
for (var i = 1; i <= totalPage; i++) {
$("#pagination ul").append(
'<li id="page'+i+'"><a href="javascript:void(0);" οnclick="getUserList(' + i + ',' + avageNum + ')">' + i + '</a></li>'
)
}
$("#pagination ul").append(
'<li><a href="javascript:void(0);" id="next">下一页</a></li>'
)
// $("select option[value=" + avageNum + "]").attr('selected', true)
$("#page1").addClass("active");
checkA();
}
//很关键，因为执行initPagination方法时，将select删除再重新添加，所以需要先将select上的结点移除off
//然后再绑定结点on，如果不这么做，会出现change事件只被触发一次。
// $(document).off('change','#dataNum').on('change','#dataNum',function(){
// avageNum = $(this).children('option:selected').val();
// currentPage = 1;
// getUserList(currentPage,avageNum);
// initPagination(totalPage,totalNum);
// });
//设置分页栏点击时候的高亮
$("#pagination").on("click","li",function(){
var aText = $(this).find('a').html();
checkA();
if (aText == "上一页"){
console.log("上一页");
console.log((currentPage - 1)+"-----------"+avageNum);
$(".pagination > li").removeClass("active");
$("#page"+(currentPage -1)).addClass("active");
getUserList(currentPage - 1,avageNum);
checkA();
}else if(aText == "下一页"){
console.log("下一页");
console.log((currentPage + 1)+"-----------"+avageNum);
$(".pagination > li").removeClass("active");
$("#page"+(currentPage + 1)).addClass("active");
getUserList(currentPage + 1,avageNum);
checkA();
}else{
console.log("数字");
console.log(aText+"-----------"+avageNum);
$(".pagination > li").removeClass("active");
$(this).addClass("active");
getUserList(parseInt(aText),avageNum);
checkA();
}
})
//因为其他地方都需要用到这两句，所以封装出来
//主要是用于检测当前页如果为首页，或者尾页时，上一页和下一页设置为不可选中状态
function checkA() {
currentPage == 1 ? $("#prev").addClass("btn btn-default disabled") : $("#prev").removeClass("btn btn-default disabled");
currentPage == totalPage ? $("#next").addClass("btn btn-default disabled") : $("#next").removeClass("btn btn-default disabled");
}
效果图：
image.png
原文效果图：
image.png
参考原文链接
https://blog.csdn.net/chengtanyong4777/article/details/79711334
网友评论