1、先看分页效果
页面数小于7页时
页面数大于7页时
2、分页bootstrap-pagination-spirit.js文件
var total = 0;
var pages = 0;
var limit = 0;
var htmlFirstSeparator = '<li class="page-item page-first-separator disabled"><a class="page-link" href="JavaScript:void(0);">...</a></li>';
var htmlLastSeparator = '<li class="page-item page-last-separator disabled"><a class="page-link" href="JavaScript:void(0);">...</a></li>';
function generatePageItem(pages){
return '<li class="page-item"><a class="page-link" href="JavaScript:void(0);">'+pages+'</a></li>';
}
$(document).on("click",'.page-item',function () {
var pageList = $(".pagination").find(".page-item");
var click = $(this);
var textClick = click.text();
var active = $(".pagination").find(".active");
var textActive = active.find("a").text();
var pagePre = $(".pagination").find(".page-pre");
var pageNext = $(".pagination").find(".page-next");
var firstSeparator = $(".pagination").find(".page-first-separator");
var lastSeparator = $(".pagination").find(".page-last-separator");
// 页面只有7页及其以下的数据
if(pages <= 7){
if(textClick === "‹"){
// 点击的是上一页
if(textActive !== "1"){
active.removeClass("active");
active.prev().addClass("active");
}else{
active.removeClass("active");
pageNext.prev().addClass("active");
}
}else if(textClick === "›"){
// 点击的是下一页
if(textActive !== pages+""){
active.removeClass("active");
active.next().addClass("active");
}else{
active.removeClass("active");
pagePre.next().addClass("active");
}
}else{
pageList.removeClass("active");
$(this).addClass("active");
}
}else{
// 当前点击的是第几个元素
var indexClick = pageList.index(this);
var indexActive = pageList.index(active);
var textClickInt = parseInt(textClick);
var textActiveInt = parseInt(textActive);
if(textClick === "‹"){
// 点击的是上一页
if((pages-textActiveInt) === 3){
pageNext.prev().prev().remove();
pageNext.prev().prev().remove();
pageNext.prev().before(htmlLastSeparator);
}
if(indexActive === 4){
if(textActiveInt !== 4){
// 在最后一个分隔符前去掉一列
lastSeparator.prev().remove();
// 在第一个分隔符后面加入一列
firstSeparator.after(generatePageItem(textActiveInt-2));
}
if(textActiveInt === 5){
firstSeparator.after(generatePageItem(textActiveInt-3));
firstSeparator.remove();
}
}
if(textActiveInt !== 1){
active.removeClass("active");
active.prev().addClass("active");
}else{
// 点击的是最后一个元素
for(var m=0; m<5; m++){
pageNext.prev().prev().remove();
}
for(var n=0; n<4; n++){
pageNext.prev().before(generatePageItem(pages-4+n));
}
pagePre.next().after(htmlFirstSeparator);
active.removeClass("active");
pageNext.prev().addClass("active");
}
}else if(textClick === "›"){
// 点击的是下一页
if(textActiveInt === 4){
// 移除2个列
pagePre.next().next().remove();
pagePre.next().next().remove();
// 添加第一个分隔符
pagePre.next().after(htmlFirstSeparator);
}
if(indexActive === 4){
if((pages - textActiveInt) !== 3){
firstSeparator.next().remove();
// 在最后一个分隔符前添加一列
lastSeparator.before(generatePageItem(textActiveInt+2));
}
if((pages - textActiveInt) === 4){
lastSeparator.before(generatePageItem(textActiveInt+3));
lastSeparator.remove();
}
}
if(textActiveInt !== pages){
active.removeClass("active");
active.next().addClass("active");
}else{
for(var o=0; o<5; o++){
pagePre.next().next().remove();
}
for(var p=0; p<4; p++){
pagePre.next().after(generatePageItem(5-p));
}
pageNext.prev().before(htmlLastSeparator);
active.removeClass("active");
pagePre.next().addClass("active");
}
}else{
if(indexClick === 7){
// 点击的是最后一个元素
for(var i=0; i<5; i++){
pageNext.prev().prev().remove();
}
for(var j=0; j<4; j++){
pageNext.prev().before(generatePageItem(pages-4+j));
}
pagePre.next().after(htmlFirstSeparator);
}else if(indexClick === 5){
if(textClickInt === 5){
// 移除2个列
pagePre.next().next().remove();
pagePre.next().next().remove();
// 添加第一个分隔符
pagePre.next().after(htmlFirstSeparator);
// 当前页码后再添加一个页码
$(this).after(generatePageItem(6));
// 判断是否去掉最后一个分隔符
if((pages - textClickInt) === 3){
lastSeparator.before(generatePageItem(pages-1));
lastSeparator.remove();
}
}else{
if((pages - textClickInt) !== 2){
// 移除前一个分隔符后面的一列
firstSeparator.next().remove();
// 在后一个分隔符前面加入一列
lastSeparator.before(generatePageItem(textClickInt+1));
// 判断是否去掉最后一个分隔符
if((pages - textClickInt) === 3){
lastSeparator.before(generatePageItem(pages-1));
lastSeparator.remove();
}
}
}
}else if(indexClick === 4){
// 无变化
}else if(indexClick === 3){
if((pages - textClickInt) === 4){
pageNext.prev().prev().remove();
pageNext.prev().prev().remove();
pageNext.prev().before(htmlLastSeparator);
}
if(textClickInt !== 3){
// 移除后一个分隔符前面的一列
lastSeparator.prev().remove();
// 在第一个分隔符前面加入一列
firstSeparator.after(generatePageItem(textClickInt-1));
// 如果点击的数字是4,再在第一个分隔符前面加入一列,同时移除第一个分隔符
if(textClickInt === 4){
firstSeparator.after(generatePageItem(2));
firstSeparator.remove();
}
}
}else if(indexClick === 1){
// 点击的是第一个元素
for(var k=0; k<5; k++){
pagePre.next().next().remove();
}
for(var l=0; l<4; l++){
pagePre.next().after(generatePageItem(5-l));
}
pageNext.prev().before(htmlLastSeparator);
}
if(textClick !== "..."){
pageList.removeClass("active");
$(this).addClass("active");
}
}
}
console.log($(".pagination").find(".active").find("a").text());
updatePaginationDetail(parseInt($(".pagination").find(".active").find("a").text()));
});
function initSpiritPagination(total, pages, limit){
this.total = total;
this.pages = pages;
this.limit = limit;
var html = '';
var commonHead = '<div class="float-left pagination-detail">' +
'<span class="pagination-info">' +
'显示第 1 到第 '+limit+' 条记录,总共 '+total+' 条记录' +
'</span>' +
'</div>' +
'<div style="float:right" class="float-right pagination">' +
'<ul class="pagination">' +
'<li class="page-item page-pre"><a class="page-link" href="JavaScript:void(0);">‹</a></li>'+
'<li class="page-item active"><a class="page-link" href="JavaScript:void(0);">1</a></li>';
if(pages === 0){
html = '<div class="float-left pagination-detail">' +
'<span class="pagination-info">' +
'显示第 0 到第 0 条记录,总共 0 条记录' +
'</span>' +
'</div>';
}else if(pages === 1){//只有一页数据
html = '<div class="float-left pagination-detail">' +
'<span class="pagination-info">' +
'显示第 1 到第 '+total+' 条记录,总共 '+total+' 条记录' +
'</span>' +
'</div>';
}else if(pages <= 7){
html = commonHead;
for(var i=1; i< pages; i++){
html += '<li class="page-item"><a class="page-link" href="JavaScript:void(0);">'+(i+1)+'</a></li>';
}
html += '<li class="page-item page-next"><a class="page-link" href="JavaScript:void(0);">›</a></li>'+
'</ul></div>';
}else if(pages > 7){
html = commonHead;
for(var j=0; j< 4; j++){
html += '<li class="page-item"><a class="page-link" href="JavaScript:void(0);">'+(j+2)+'</a></li>';
}
html += '<li class="page-item page-last-separator disabled"><a class="page-link" href="JavaScript:void(0);">...</a></li>'+
'<li class="page-item"><a class="page-link" href="JavaScript:void(0);">'+pages+'</a></li>'+
'<li class="page-item page-next"><a class="page-link" href="JavaScript:void(0);">›</a></li>'+
'</ul></div>';
}
$(".spiritPagination").html(html);
}
function updatePaginationDetail(pages){
var from = (pages-1) * this.limit + 1;
var to = pages * this.limit;
if(pages === this.pages){
to = this.total;
}
var html = '显示第 '+from+' 到第 '+to+' 条记录,总共 '+this.total+' 条记录';
$(".pagination-info").html(html);
updateViewInfo(pages, this.limit);
}
3、页面引入分页JS文件并添加HTML
<script type="text/javascript" th:src="@{/js/bootstrap-pagination-spirit.js}"></script>
<div class="widget-content">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th> 楼栋名</th>
<th> 楼层</th>
<th> 房间号</th>
<th> 空床位数</th>
<th style="width: 20%" class="td-actions"> 操作</th>
</tr>
</thead>
<tbody id="roomList">
</tbody>
</table>
<div class="spiritPagination"></div>
</div>
js请求后端数据并生成表格数据
var defaultPageSize = 5;//页面大小
var totalPages = 1;//总页数
var currentPage = 1;//当前页码
function getRooms(type) {//type == 1 表示初始化
if (type == 1) {
currentPage = 1;//重修查询初始化到第一页
}
$.ajax({
url: /*[[@{/selectroom/getlegalrooms}]]*/,
type: "get",
async: false,
dataType: "json",
data: {
"ldid": ldid,
"floor": floor,
"current": currentPage,
"pageSize": defaultPageSize
},
beforeSend: function () {
// 图标转转转
$.blockUI({message: '<h4><img th:src="@{/img/css_Wait.gif}" /> 请求中,请稍等...</h4>'});
},
complete: function () {
$.unblockUI();
},
success: function (data) {
$.unblockUI();
$("#roomList").empty();
var tbodyHtml = $("#roomList").html();
var roomList = [];
if (data != null) {
roomList = data.rooms;//后端查询列表数据
totalCount = data.count;//后端查询列表总数量
// 总页数向上取整
totalPages = Math.ceil(totalCount / defaultPageSize);
$.each(roomList, function (index, obj) {
//添加行
var rowTemplate = "<tr>" +
"<td> " + obj.ldm + "</td>" +
"<td> " + obj.fjh.substr(0, 1) + "</td>" +
"<td> " + obj.fjh + "</td>" +
"<td> " + obj.num + "</td>" +
"<td class=\"td-actions\">" +
"<button type=\"button\" οnclick=\"getInterests(" + obj.ldid + ',' + obj.fjh + ")\" class=\"btn btn-info\">查看房间信息</button>" +
"</td>" +
"</tr>";
tbodyHtml += rowTemplate;
});
if (type == 1) {
//初始化分页数据1、数据总条数,2、总页数,3、页面大小
initSpiritPagination(data.count, totalPages, defaultPageSize);
$("#roomList").html(tbodyHtml);
}
}
},
error: function () {
}
});
}
//点击分页时执行方法
function updateViewInfo(pageCurrent, pageSum) {
currentPage = pageCurrent;
this.getRooms(2);
}