最近自己做了一个后台,想把分页通过js给封装起来
于是乎就有了下面的代码
此代码,算是一个半成品,还需完善,思路还是可以借鉴的
page方法传入3个参数
1、total总条数
2、page当前页码
3、seVal当前也显示的总数
page: function (total, page,seVal) {
var pageHtml = '<div class="col-lg-4 col-md-4 col-sm-12">';
pageHtml += '<div class="dataTables_info" id="datatable_info"></div></div>';
pageHtml += '<div class="col-lg-8 col-md-8 col-sm-12">';
pageHtml += '<div class="dataTables_paginate paging_bs_full" id="datatable_paginate">';
pageHtml += '<div class="page-select"> 每页记录 <select id="spage"><option value="10">10</option>';
pageHtml += '<option value="30">30</option><option value="50">50</option>';
pageHtml += '<option value="100">100</option><option value="500">500</option>';
pageHtml += '<option value="1000">1000</option></select></div>';
pageHtml += '<ul class="pagination">';
pageHtml += ' </ul>';
pageHtml += '</div>';
pageHtml += '</div>';
pageHtml += '';
$("#pageRow").html(pageHtml);
//1、下拉选择
//2、根据分页显示索引值
var starSum = (page - ) * seVal == ? : (page - ) * seVal;
var rowTip = '检索到 ' + total + ' 条记录 显示第 ' + starSum + ' 条 - ' + ((page * seVal) > total ? total : (page * seVal)) + ' 条';
$("#datatable_info").html(rowTip);
//3、计算总页数
var pageCount = Math.ceil((total * 1.0) / seVal);
var strPage = '';
//4、判断首页
if (page == ) {
strPage += '<li class="disabled"><a tabindex="0" class="first" id="datatable_first">首页</a></li>';
strPage += '<li class="disabled"><a tabindex="0" class="previous" id="datatable_previous">上一页</a></li>';
} else {
strPage += '<li><a tabindex="0" data-page="1" class="paginate_button first" id="datatable_first">首页</a></li>';
strPage += '<li class=""><a data-page="' + (parseInt(page) - ) + '" tabindex="0" class="paginate_button previous" id="datatable_previous">上一页</a></li>';
}
//5、如果总数小于制定数,循环
if (pageCount < ) {
for (var i = ; i < pageCount + ; i++) {
strPage += '<li class="' + (i == page ? 'disabled' : '') + '"><a data-page="' + i + '" class="paginate_button" tabindex="0">' + i + '</a></li>';
}
} else {
var maxfeye = parseInt(page) + ;
var minfeye = parseInt(page) - ;
if (page < ) {
maxfeye = ;
minfeye = ;
}
if (maxfeye > pageCount) {
minfeye = pageCount-;
maxfeye = pageCount;
} for (var f = minfeye; f < maxfeye+; f++) {
strPage += '<li class="' + (f == page ? 'disabled' : '') + '"><a data-page="' + f + '" class="paginate_button" tabindex="0">' + f + '</a></li>';
}
}
//6、尾页
if (page == pageCount) {
strPage += '<li class="disabled"><a tabindex="0" class="next" id="datatable_next">下一页</a></li>';
strPage += '<li class="disabled"><a tabindex="0" class="last" id="datatable_last">尾页</a></li>';
} else {
strPage += '<li class=""><a tabindex="0" data-page="' + (parseInt(page) + ) + '" class="paginate_button next" id="datatable_next">下一页</a></li>';
strPage += '<li class=""><a tabindex="0" data-page="' + pageCount + '" class="paginate_button last" id="datatable_last">尾页</a></li>';
}
$(".pagination").html(strPage);
//7、分页页码点击事件
$("a.paginate_button").on('click', function () {
fyt.initList($(this).attr("data-page"), $("#spage").val());
});
//8、每页记录下拉事件
$("#spage").on('change', function () {
fyt.initList(,$(this).val());
});
//9、给下拉框赋值
$("#spage").val(seVal);
}
最终显示截图,上图
已完成,如果谁有更好的方法,或者更好优化的地方,可以交流交流
86594082 屌丝聚集之地 你懂得