pagination分页插件使用

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

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

	引入pagination.js;pagination.css;

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

一个id为pagination的div

  • js
// 初始化分页模块
	// 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)

    最终效果

posted on 2018-08-09 00:11  小飞侠flyA  阅读(3642)  评论(0编辑  收藏  举报

导航