pagination分页插件使用

之所以写这篇博客，是因为前段时间有用到pagination.js，网上的各种配置使用方法，但我发现多个版本使用方法有出入，所有写下这篇博客，供以后查看。

注：此插件基于jq，必须先引入jq才能正常使用。

	引入pagination.js;pagination.css;

插件链接：https://github.com/ljzy1026/pagination

html

一个id为pagination的div

// 初始化分页模块
	// sort是本项目ajax请求需要的一个参数
	function pageStart(sort) {
		var container = $('#pagination');
		// sort需要定义才能被回调函数获取到	
		var sort = sort || 11;
		// 初始化
		container.pagination({
			// 数据源，好几种写法（直接写数组；写函数中包含ajax请求；直接写url）
			dataSource: '/essaymanage/getessaylist?status=-1&sort=' + sort,
			// 数据最终来源 res.data
			locator: 'data',
			// 总数，一般都是从后台拿的（写死是totalNumber参数）
			totalNumberLocator: function(response) {
				return response.num;
			},
			// 每页条目数
			pageSize: 10,
			// 起始页数
			pageNumber: 1,
			// 参数名一般有变化，给上面两个参数起别名
			alias: {
				pageNumber: 'page',
				pageSize: 'size'
			},
			// 上一页文本
			prevText: '<',
			// 下一页文本
			nextText: '>',
			ajax: {
				beforeSend: function() {
					container.prev().html('Loading data from flickr.com ...');
				}
			},
			// 回调函数
			callback: function(res, pagination) {
				console.log(sort);
				// 先清空显示区域
				$('.tb tr:gt(0)').hide();
				// 循环拿数据，插入数据
				for (var i = 0; i < res['length']; i++) {
				    // 拿数据，处理数据...
				}
			}
		})
	}
	pageStart();

css(自定义css) 最终效果

来源：oschina

链接：https://my.oschina.net/u/4315561/blog/3873798

标签

pagination

pagination.js

javascript