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)
  
  最終效果