基于bootstrap的bootstrapPaginator分页插件

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">

	<script src="assets/jquery/jquery.min.js"></script>
	<script src="assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/bootstrap-paginator/bootstrap-paginator.min.js"></script>

引入文件

页面结构：直接使用bootstrap的分页

<ul class="pagination">
    <!--里面什么都不用写-->
</ul>

js分页代码

var setPaginator = function(pageCurr, pageSum, callback) {
		$('.pagination').bootstrapPaginator({ // 这个方法调用时，自动在.pagination添加分页li
			/*当前使用的是3版本的bootstrap*/
			bootstrapMajorVersion: 3,
			/*配置的字体大小是小号*/
			size: 'small',
			/*当前页*/
			currentPage: pageCurr,
			/*一共多少页*/
			totalPages: pageSum,
			/*页面上最多显示几个含数字的分页按钮*/
			numberOfPages: pageSum,
			/*设置显示的样式，默认是箭头	*/
			itemTexts: function(type, page, current) {
				switch(type) {
					case "first": // type值固定
						return `<span class="glyphicon glyphicon-fast-backward"></span>`;
					case "prev":
						return `<span class="glyphicon glyphicon-step-backward"></span>`;
					case "next":
						return `<span class="glyphicon glyphicon-step-forward"></span>`;
					case "last":
						return `<span class="glyphicon glyphicon-fast-forward"></span>`;
					case "page":
						return page;
				}
			},
			onPageClicked: function(event, originalEvent, type, page) {
				currPage = page; // 注意currPage的作用域
				callback && callback();
			}
		});
	}

js部分的完整代码：（乐淘二级分类页面js）

//获取二级分类
var getCategorySecondData = function(params, callback) {
	$.ajax({
		url: '/category/querySecondCategoryPaging',
		type: 'get',
		data: params,
		dataType: 'json',
		success: function(response) {
			callback && callback(response);
		}
	});
}

var currPage = 1;

	var render = function() {
		getCategorySecondData({
			page: currPage,
			pageSize: 3
		}, function(data) {
			$("tbody").html(template('secondList', data));
			setPaginator(data.page, Math.ceil(data.total / data.size), render);
		});
	};
	render();  // 渲染页面函数

	//	分页
	var setPaginator = function(pageCurr, pageSum, callback) {
		$('.pagination').bootstrapPaginator({
			/*当前使用的是3版本的bootstrap*/
			bootstrapMajorVersion: 3,
			/*配置的字体大小是小号*/
			size: 'small',
			/*当前页*/
			currentPage: pageCurr,
			/*一共多少页*/
			totalPages: pageSum,
			/*页面上最多显示几个含数字的分页按钮*/
			numberOfPages: pageSum,
			/*设置显示的样式，默认是箭头	*/
			itemTexts: function(type, page, current) {
				switch(type) {
					case "first": // type值固定
						return `<span class="glyphicon glyphicon-fast-backward"></span>`;
					case "prev":
						return `<span class="glyphicon glyphicon-step-backward"></span>`;
					case "next":
						return `<span class="glyphicon glyphicon-step-forward"></span>`;
					case "last":
						return `<span class="glyphicon glyphicon-fast-forward"></span>`;
					case "page":
						return page;
				}
			},
			onPageClicked: function(event, originalEvent, type, page) {
				currPage = page; // 注意currPage的作用域
				callback && callback();
			}
		});
	}

接口的一些解释（自己构建的）

返回的数据