基于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分页框架。逻辑全在一个函数里，感觉一团糨糊！不管怎么样！至少还是能用的