基于bootstrap的bootstrapPaginator分页插件

引入文件

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

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 ``;
					case "prev":
						return ``;
					case "next":
						return ``;
					case "last":
						return ``;
					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 ``;
					case "prev":
						return ``;
					case "next":
						return ``;
					case "last":
						return ``;
					case "page":
						return page;
				}
			},
			onPageClicked: function(event, originalEvent, type, page) {
				currPage = page; // 注意currPage的作用域
				callback && callback();
			}
		});
	}

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

返回的数据