一磁玉、需要引入的包
simplePagination.css simplePagination.js paging.js paging.css
地址：common\mior-lib\paging\ common版本：page-20170323
二、調(diào)用組件
組件提供兩個(gè)接口
pageUtils.init(obj, options, renderback, callback[,arraySelect]):初始化要渲染的dom
pageUtils.renderPage(options, renderback):分頁(yè)按鈕的局部刷新
三、參數(shù)說明
obj: 組件要渲染的位置(jquery對(duì)象)
options: 渲染分頁(yè)的初始化參數(shù)
{
totalItems:'', // 參與分頁(yè)的項(xiàng)目總數(shù)敬拓，必傳
currentPage:'', // 頁(yè)面初始化渲染后高亮的頁(yè)碼老速，從1開始，默認(rèn)值為1
itemsOnPage:'' // 每頁(yè)上顯示的項(xiàng)目數(shù)备蚓，默認(rèn)為50
}
renderback: 點(diǎn)擊頁(yè)碼的回調(diào)
callback: 選擇每頁(yè)項(xiàng)目數(shù)的下拉框课蔬、輸入頁(yè)碼點(diǎn)擊確定的回調(diào)
arraySelect: 可選參數(shù)，選擇框可選的每頁(yè)項(xiàng)目數(shù)郊尝，長(zhǎng)度為3的數(shù)組</br>
currentPage: 當(dāng)前頁(yè)碼
itemsOnPage: 每頁(yè)上顯示的項(xiàng)目數(shù)
四二跋、示例用法：
/**
* currentPage --- 當(dāng)前點(diǎn)擊的頁(yè)碼
* itemsOnPage --- 每頁(yè)上顯示的項(xiàng)目數(shù)
*/
pageUtils.init(obj, options, function (currentPage, itemsOnPage) {
// 1.獲取新數(shù)據(jù)
}, function (currentPage, itemsOnPage) {
// 1.獲取新數(shù)據(jù)
// 2.重新渲染
options.currentPage = currentPage;
options.itemsOnPage = itemsOnPage;
pageUtils.renderPage(options, function (currentPage, itemsOnPage) {
// 1.獲取新數(shù)據(jù)
})
})
五、應(yīng)用示例
代碼效果：
[圖片上傳失敗...(image-294d8e-1555904530872)]
示例：
initPagination:function () {
var self = this;
//var array = [25,50,100]
var options = {
totalItems:self.pageInfo.totalCount,
currentPage:self.pageInfo.pageNo,
itemsOnPage:self.pageInfo.pageSize
}
//初始化組件
pageUtils.init(this.$("#paginationBlock"), options, function (currentPage, itemsOnPage){
self.pageInfo.pageNo = currentPage - 1;
self.pageInfo.pageSize = newItems;
self.reQuery();
},function(currentPage,itemsOnPage) {
//當(dāng)查詢或者選擇每頁(yè)呈現(xiàn)項(xiàng)目數(shù)后重新查詢
self.pageInfo.pageNo = currentPage - 1;
self.pageInfo.pageSize = itemsOnPage;
options.currentPage = currentPage ;
options.itemsOnPage = itemsOnPage;
self.reQuery();
//發(fā)生改變重新渲染分頁(yè)組件
pageUtils.renderPage(options,function (currentPage, itemsOnPage) {
self.pageInfo.pageNo = currentPage -1 ;
self.pageInfo.pageSize = newItems;
self.reQuery();
})
}/*,array*/)
}
五流昏、使用注意
1.后臺(tái)存儲(chǔ)頁(yè)面的數(shù)組一般從0開始扎即，函數(shù)向后臺(tái)取數(shù)據(jù)時(shí)注意傳當(dāng)前頁(yè)面時(shí)應(yīng)該做減1處理。
2.整個(gè)條寬度由傳入的obj決定况凉。
