基于bootstrap的后台分页

分页为后台分页，只不过用了bootstrap的样式，然后前台js代码需要自己实现

pagination.html

<nav class="navigation paging" role="navigation"><div><input id="pageNumber" type="hidden" name="pageNumber" class="page-no" value="" /> <input type="hidden" name="pageSize" class="page-size" value="" /> <input type="hidden" name="pageSize" class="page-size" value="" /></div><!-- <button class="btn btn-primary" type="button">没有记录</button> --><ul class="pagination pull-right no-margin"><button class="btn btn-primary" type="button">共 <span id="totalCount" class="badge"> </span>条 / 共 <span id="totalPage" class="badge"> </span>页</button><!-- 首页 --><li id="first" class="first" data-page-no="1"><a href="">首页</a></li><li id="previouspage" class="previous" data-page-no=""><a href=""><i class="layui-icon"></i></a></li><li id="predisabled" class="extend disabled" style="display: none"><a href="javascript:void(0)">...</a></li><!-- ... --><li id="nextdisabled" class="extend disabled" style="display: none"><a href="javascript:void(0)">...</a></li><li id="next" class="next" data-page-no=""><a href=""><i class="layui-icon"></i></a></li><!-- 尾页 --><li id="last" class="last" data-page-no=""><a href="">尾页</a></li></ul></nav>

xx.js 

var loadPage = function(page, totalPage, totalCount) {//加载分页框前 ，先清空分页码。防止分页码重复$('.pagenumber').each(function() {$(this).remove();})var albumId = $('#albumId').val();$('#totalPage').text(totalPage);$('#totalCount').text(totalCount);$('#pageNumber').val(page);//应显示的页码框数var pagingSize = 7;var startPage;var endPage;// 加载首页 尾页框信息$('#first a').attr('href', 'javascript:losdMsg(' + 1 + ')');$('#last a').attr('href', 'javascript:losdMsg(' + totalPage + ')');//上一页，当前页为首页时隐藏按钮if (page == "1")$('#previouspage').hide();else {$('#previouspage').show();$('#previouspage a').attr('href', 'javascript:losdMsg(' + (page - 1) + ')');}//下一页，当前页为尾页时隐藏按钮if (totalPage == page)$('#next').hide();else {$('#next').show();$('#next a').attr('href', 'javascript:losdMsg(' + (page + 1) + ')');}//当总页数大于应显示的页码框数，显示的页码数的始末位置if (totalPage > pagingSize) {startPage = page - (pagingSize / 2);startPage = startPage < 1 ? 1 : Math.floor(startPage);endPage = startPage + pagingSize - 1;if (endPage > totalPage) {endPage = totalPage;startPage = totalPage - pagingSize + 1;}} else {startPage = 1;endPage = totalPage;}//显示的页码数的起始位置不在首页时，显示...if (totalPage > pagingSize && startPage != 1) {$('#predisabled').show();} else {$('#predisabled').hide();}//显示的页码数的终点位置不在尾页时，显示...if ((totalPage > pagingSize && endPage != totalPage)) {$('#nextdisabled').show();} else {$('#nextdisabled').hide();}//渲染页码框，因为是after 所以要倒序渲染for (var i = endPage; i > startPage - 1; i--) {if (i == page) {$('#predisabled').after('<li class=" pagenumber current active"><a href="javascript:void(0)">' + i + '</a></li>');continue;}$('#predisabled').after('<li class="pagenumber" data-page-no="' + i + '"><a href="javascript:losdMsg(' + i + ')">' + i + '</a></li>')}}

上面的 loadMsg() 是加载数据用的，也就是一个ajax请求。albumId 也是我请求需要用到的参数，非必须

然后pageSize的话是后台固定的，并没有可选；所以加载的时候默认是一页。除非上面的js请求了！

有数据的样子：

没数据的样子：

最后！第一次用jq写前台分页逻辑，以前都是用的现成的js分页框架。逻辑全在一个函数里，感觉一团糨糊！不管怎么样！至少还是能用的