!function ($) { var pageEvent = { pageClicked: 'pageClicked', jumpClicked: 'jumpClicked', pageSizeChanged: 'pageSizeChanged' } var Page = function (element, options) { var defaultOption = { total: 0, pageSize: 10, pageBtnCount: 11, showFirstLastBtn: true, firstBtnText: null, lastBtnText: null, layouts : 'left', prevBtnText: "\u4e0a\u4e00\u9875", nextBtnText: "\u4e0b\u4e00\u9875", loadFirstPage: true, remote: { url: null, params: null, callback: null, success: null, beforeSend: null, complete: null, pageIndexName: 'pageIndex', pageSizeName: 'pageSize', totalName: 'total' }, showInfo: false, showStat : true, infoFormat: '{start} ~ {end} of {total} entires', showJump: true, jumpBtnText: '\u786e\u5b9a', showPageSizes: false, pageSizeItems: null, debug: false, databuffer : false, pageShow: null } this.$element = $(element); this.$page = $(''); this.$size = $('
'); this.$jump = $('
'); this.$info = $('
'); this.$stat = $(''); this.options = $.extend(true, {}, defaultOption, $.fn.crossPage.defaults, options); this.total = this.options.total || 0; this.options.pageSizeItems = this.options.pageSizeItems || [5, 10, 15, 20], this.currentPageIndex = 0; this.currentPageSize = this.options.pageSize; this.pageCount = getPageCount(this.total, this.currentPageSize); this.clicked = []; if (this.options.remote.success == null) { this.options.remote.success = this.options.remote.callback; } var init = function (obj) { var that = obj; //init size module var html = $(''); for (var i = 0; i < that.options.pageSizeItems.length; i++) { html.append('') } html.val(that.currentPageSize); that.$size.append(html); //init jump module var jumpHtml = '
'; that.$jump.append(jumpHtml); that.$jump.find('input').change(function () { if (!checkIsPageNumber(this.value, that.pageCount)) this.value = null; }); that.$element.append(that.$page.hide()); that.$element.append(that.$size.hide()); that.$element.append(that.$stat.hide()); that.$element.append(that.$jump.hide()); that.$element.append(that.$info.hide()); that._remoteOrRedner(0); that.$element .on('click', { page: that }, function (event) { eventHandler(event); }) .on('change', { page: that }, function (event) { eventHandler(event); }); switch(that.options.layouts) { case 'left': that.$element.addClass('fl'); break; case 'center': that.$element.addClass('fl').css('padding-left',that.$element.outerWidth()/2-100); break; case 'right': that.$element.addClass('fr'); break; } } var eventHandler = function (event) { var that = event.data.page; var $target = $(event.target); if (event.type === 'click' && $target.data('pageIndex') !== undefined && !$target.parent().hasClass('active')) { var pageIndex = $(event.target).data("pageIndex"); that.$element.trigger(pageEvent.pageClicked, pageIndex); that.debug('event[ pageClicked ] : pageIndex = ' + (pageIndex)); that._remoteOrRedner(pageIndex); } else if (event.type === 'click' && $target.data('pageBtn') === 'jump') { var pageIndexStr = that.$jump.find('input').val(); if (checkIsPageNumber(pageIndexStr, that.pageCount)) { var pageIndex = pageIndexStr - 1; that.$element.trigger(pageEvent.jumpClicked, pageIndex); that.debug('event[ jumpClicked ] : pageIndex = ' + (pageIndex)); that._remoteOrRedner(pageIndex); } that.$jump.find('input').val(null); } else if (event.type === 'change' && $target.data('pageBtn') === 'size') { var pageSize = that.$size.find('select').val(); that.currentPageSize = pageSize; that.$element.trigger(pageEvent.pageSizeChanged, pageSize); that.debug('event[ pageSizeChanged ] : pageSize = ' + pageSize); that._remoteOrRedner(0); } } if (typeof this.options.total === 'undefined' && this.options.remote.url === null) { console && console.error("[init error] : the options must have the parameter of 'remote.url' or 'total'."); } else if (typeof this.options.total === 'undefined' && !this.options.loadFirstPage) { console && console.error("[init error] : if you don't remote the first page. you must set the options or 'total'."); } else { init(this); } } Page.prototype = { _remoteOrRedner: function (pageIndex) { var that=this,b=true; if(this.options.databuffer){ $(this.clicked).each(function(i,n){ if(pageIndex==n){ that.renderPagination(pageIndex); if (typeof that.options.pageShow === 'function') that.options.pageShow(pageIndex); b=false; } }); } if(b){ if (this.options.remote.url != null && (this.options.loadFirstPage || pageIndex > 0)){ this.remote(pageIndex); } else{ this.renderPagination(pageIndex); if (typeof that.options.pageShow === 'function') that.options.pageShow(pageIndex); } } }, remote: function (pageIndex, params) { var that = this; if (isNaN(parseInt(pageIndex)) || typeof pageIndex === "object") { params = pageIndex; pageIndex = null; } if (isNaN(parseInt(pageIndex))) { pageIndex = that.currentPageIndex; } var pageParams = {}; pageParams[this.options.remote.pageIndexName] = pageIndex; pageParams[this.options.remote.pageSizeName] = this.currentPageSize; this.options.remote.params = deserializeParams(this.options.remote.params); if (params) { params = deserializeParams(params); this.options.remote.params = $.extend({}, this.options.remote.params, params); } var requestParams = $.extend({}, this.options.remote.params, pageParams); $.ajax({ url: this.options.remote.url, dataType: 'json', data: requestParams, contentType: 'application/Json', async: false, beforeSend: function (XMLHttpRequest) { if (typeof that.options.remote.beforeSend === 'function') that.options.remote.beforeSend(XMLHttpRequest); }, complete: function (XMLHttpRequest, textStatu) { if (typeof that.options.remote.complete === 'function') that.options.remote.complete(XMLHttpRequest, textStatu); }, success: function (result) { that.debug("ajax request : params = " + JSON.stringify(requestParams), result); var total = GetCustomTotalName(result, that.options.remote.totalName); if (total == null || total == undefined) { console && console.error("the response of totalName : '" + that.options.remote.totalName + "' not found"); } else { that._updateTotal(total); if (typeof that.options.remote.success === 'function') that.options.remote.success(result, pageIndex); that.renderPagination(pageIndex); } that.clicked.push(pageIndex); } }) }, renderPagination: function (pageIndex) { this.currentPageIndex = pageIndex; var pages = renderPages(this.currentPageIndex, this.currentPageSize, this.total, this.options.pageBtnCount, this.options.firstBtnText, this.options.lastBtnText, this.options.prevBtnText, this.options.nextBtnText, this.options.showFirstLastBtn); this.$page.empty().append(pages); this.$info.text(renderInfo(this.currentPageIndex, this.currentPageSize, this.total, this.options.infoFormat)); if(this.options.showStat){ this.$stat.show(); } if (this.pageCount > 1) { this.$page.show(); if (this.options.showPageSizes) this.$size.show(); if (this.options.showJump) this.$jump.show(); if (this.options.showInfo) this.$info.show(); } else if (this.pageCount == 1) { if (this.options.showInfo) this.$info.show(); } else { this.$page.hide(); this.$size.hide(); this.$jump.hide(); this.$info.hide(); } }, _updateTotal: function (total) { this.total = total; this.pageCount = getPageCount(total, this.currentPageSize); this.$stat.html('
  • \u5171'+this.pageCount+'\u9875
  • \u8df3\u8f6c\u81f3
  • '); }, destroy: function () { this.$element.unbind().data("page", null).empty(); }, debug: function (message, data) { if (this.options.debug && console) { message && console.info(message); data && console.info(data); } } } var renderInfo = function (currentPageIndex, currentPageSize, total, infoFormat) { var startNum = (currentPageIndex * currentPageSize) + 1; var endNum = (currentPageIndex + 1) * currentPageSize; endNum = endNum >= total ? total : endNum; return infoFormat.replace('{start}', startNum).replace('{end}', endNum).replace('{total}', total); } var renderPages = function (pageIndex, pageSize, total, pageBtnCount, firstBtnText, lastBtnText, prevBtnText, nextBtnText, showFirstLastBtn) { pageIndex = pageIndex == undefined ? 1 : parseInt(pageIndex) + 1; //set pageIndex from 1, convenient calculation page var pageCount = getPageCount(total, pageSize); var html = []; if (pageCount <= pageBtnCount) { html = renderPage(1, pageCount, pageIndex); } else { var firstPage = renderPerPage(firstBtnText || 1, 0); var lastPage = renderPerPage(lastBtnText || pageCount, pageCount - 1); var prevPage = renderPerPage(prevBtnText, pageIndex - 2); var nextPage = renderPerPage(nextBtnText, pageIndex); //button count of both sides var symmetryBtnCount = (pageBtnCount - 1 - 4) / 2; if (!showFirstLastBtn) symmetryBtnCount = symmetryBtnCount + 1; var frontBtnNum = (pageBtnCount + 1) / 2; var behindBtnNum = pageCount - ((pageBtnCount + 1) / 2); symmetryBtnCount = symmetryBtnCount.toString().indexOf('.') == -1 ? symmetryBtnCount : symmetryBtnCount + 0.5; frontBtnNum = frontBtnNum.toString().indexOf('.') == -1 ? frontBtnNum : frontBtnNum + 0.5; behindBtnNum = behindBtnNum.toString().indexOf('.') == -1 ? behindBtnNum : behindBtnNum + 0.5; if (pageIndex <= frontBtnNum) { if (showFirstLastBtn) { html = renderPage(1, pageBtnCount - 2, pageIndex); html.push(nextPage); html.push(lastPage); } else { html = renderPagenderPage(1, pageBtnCount - 1, pageIndex); html.push(nextPage); } } else if (pageIndex > behindBtnNum) { if (showFirstLastBtn) { html = renderPage(pageCount - pageBtnCount + 3, pageBtnCount - 2, pageIndex); html.unshift(prevPage); html.unshift(firstPage); } else { html = renderPage(pageCount - pageBtnCount + 2, pageBtnCount - 1, pageIndex); html.unshift(prevPage); } } else { if (showFirstLastBtn) { html = renderPage(pageIndex - symmetryBtnCount, pageBtnCount - 4, pageIndex); html.unshift(prevPage); html.push(nextPage); html.unshift(firstPage); html.push(lastPage); } else { html = renderPage(pageIndex - symmetryBtnCount, pageBtnCount - 2, pageIndex); html.unshift(prevPage); html.push(nextPage); } } } return html; } var renderPage = function (beginPageNum, count, currentPage) { var html = []; for (var i = 0; i < count; i++) { var page = renderPerPage(beginPageNum, beginPageNum - 1); if (beginPageNum == currentPage) page.addClass("active"); html.push(page); beginPageNum++; } return html; } var renderPerPage = function (text, value) { return $("
  • " + text + "
  • "); } var getPageCount = function (total, pageSize) { var pageCount = 0; var total = parseInt(total); var i = total / pageSize; pageCount = i.toString().indexOf('.') != -1 ? parseInt(i.toString().split('.')[0]) + 1 : i; return pageCount; } var deserializeParams = function (params) { var newParams = {}; if (typeof params === 'string') { var arr = params.split('&'); for (var i = 0; i < arr.length; i++) { var a = arr[i].split('='); newParams[a[0]] = decodeURIComponent(a[1]); } } else if (params instanceof Array) { for (var i = 0; i < params.length; i++) { newParams[params[i].name] = decodeURIComponent(params[i].value); } } else if (typeof params === 'object') { newParams = params; } return newParams; } var checkIsPageNumber = function (pageIndex, maxPage) { var reg = /^\+?[1-9][0-9]*$/; return reg.test(pageIndex) && parseInt(pageIndex) <= parseInt(maxPage); } var GetCustomTotalName = function (object, totalName) { var arr = totalName.split('.'); var temp = object; var total = null; for (var i = 0; i < arr.length; i++) { temp = mapObjectName(temp, arr[i]); if (!isNaN(parseInt(temp))) { total = temp; break; } if (temp == null) { break; } } return total; } var mapObjectName = function (data, mapName) { for (var i in data) { if (i == mapName) { return data[i]; } } return null; } $.fn.crossPage = function (option) { var args = arguments; return this.each(function () { var $this = $(this); var data = $this.data('page'); if (!data && (typeof option === 'object' || typeof option === 'undefined')) { var options = typeof option == 'object' && option; var data_api_options = $this.data(); options = $.extend(options, data_api_options); $this.data('page', (data = new Page(this, options))); } else if (data && typeof option === 'string') { data[option].apply(data, Array.prototype.slice.call(args, 1)); } else if (!data) { console && console.error("jQuery Pagination Plugin is uninitialized."); } }); } }(window.jQuery)