Spaces:
Paused
Paused
| /* | |
| * pagination.js 2.6.0 | |
| * A jQuery plugin to provide simple yet fully customisable pagination. | |
| * https://github.com/superRaytin/paginationjs | |
| * | |
| * Homepage: http://pagination.js.org | |
| * | |
| * Copyright 2014-2100, superRaytin | |
| * Released under the MIT license. | |
| */ | |
| (function(global, $) { | |
| if (typeof $ === 'undefined') { | |
| throwError('Pagination requires jQuery.'); | |
| } | |
| var pluginName = 'pagination'; | |
| var pluginHookMethod = 'addHook'; | |
| var eventPrefix = '__pagination-'; | |
| if ($.fn.pagination) { | |
| throwError('plugin conflicted, the name "pagination" has been taken by another jQuery plugin.'); | |
| } | |
| $.fn[pluginName] = function(options) { | |
| if (typeof options === 'undefined') { | |
| return this; | |
| } | |
| var container = $(this); | |
| var attributes = $.extend({}, $.fn[pluginName].defaults, options); | |
| var pagination = { | |
| initialize: function() { | |
| var self = this; | |
| // Cache data for current instance | |
| if (!container.data('pagination')) { | |
| container.data('pagination', {}); | |
| } | |
| if (self.callHook('beforeInit') === false) return; | |
| // Pagination has been initialized, destroy it | |
| if (container.data('pagination').initialized) { | |
| $('.paginationjs', container).remove(); | |
| } | |
| // Whether to disable Pagination at the initialization | |
| self.disabled = !!attributes.disabled; | |
| // Model will be passed to the callback function | |
| var model = self.model = { | |
| pageRange: attributes.pageRange, | |
| pageSize: attributes.pageSize | |
| }; | |
| // Parse dataSource to find available paging data | |
| self.parseDataSource(attributes.dataSource, function(dataSource) { | |
| // Asynchronous mode | |
| self.isAsync = Helpers.isString(dataSource); | |
| if (Helpers.isArray(dataSource)) { | |
| model.totalNumber = attributes.totalNumber = dataSource.length; | |
| } | |
| // Asynchronous mode and a 'totalNumberLocator' has been specified | |
| self.isDynamicTotalNumber = self.isAsync && attributes.totalNumberLocator; | |
| var el = self.render(true); | |
| // Add extra className to the pagination element | |
| if (attributes.className) { | |
| el.addClass(attributes.className); | |
| } | |
| model.el = el; | |
| // Append / prepend pagination element to the container | |
| container[attributes.position === 'bottom' ? 'append' : 'prepend'](el); | |
| // Bind events | |
| self.observer(); | |
| // Mark pagination has been initialized | |
| container.data('pagination').initialized = true; | |
| // Call hook after initialization | |
| self.callHook('afterInit', el); | |
| }); | |
| }, | |
| render: function(isBoot) { | |
| var self = this; | |
| var model = self.model; | |
| var el = model.el || $('<div class="paginationjs"></div>'); | |
| var isForced = isBoot !== true; | |
| self.callHook('beforeRender', isForced); | |
| var currentPage = model.pageNumber || attributes.pageNumber; | |
| var pageRange = attributes.pageRange || 0; | |
| var totalPage = self.getTotalPage(); | |
| var rangeStart = currentPage - pageRange; | |
| var rangeEnd = currentPage + pageRange; | |
| if (rangeEnd > totalPage) { | |
| rangeEnd = totalPage; | |
| rangeStart = totalPage - pageRange * 2; | |
| rangeStart = rangeStart < 1 ? 1 : rangeStart; | |
| } | |
| if (rangeStart <= 1) { | |
| rangeStart = 1; | |
| rangeEnd = Math.min(pageRange * 2 + 1, totalPage); | |
| } | |
| el.html(self.generateHTML({ | |
| currentPage: currentPage, | |
| pageRange: pageRange, | |
| rangeStart: rangeStart, | |
| rangeEnd: rangeEnd | |
| })); | |
| // Whether to hide pagination when there is only one page | |
| if (attributes.hideOnlyOnePage) { | |
| el[totalPage <= 1 ? 'hide' : 'show'](); | |
| } | |
| self.callHook('afterRender', isForced); | |
| return el; | |
| }, | |
| getPageLinkTag: function(index) { | |
| var pageLink = attributes.pageLink; | |
| return pageLink ? `<a href="${pageLink}">${index}</a>` : `<a>${index}</a>`; | |
| }, | |
| // Generate HTML for page numbers | |
| generatePageNumbersHTML: function(args) { | |
| var self = this; | |
| var currentPage = args.currentPage; | |
| var totalPage = self.getTotalPage(); | |
| var getPageLinkTag = self.getPageLinkTag; | |
| var rangeStart = args.rangeStart; | |
| var rangeEnd = args.rangeEnd; | |
| var html = ''; | |
| var i; | |
| var ellipsisText = attributes.ellipsisText; | |
| var classPrefix = attributes.classPrefix; | |
| var pageClassName = attributes.pageClassName || ''; | |
| var activeClassName = attributes.activeClassName || ''; | |
| var disableClassName = attributes.disableClassName || ''; | |
| // Display all page numbers if page range disabled | |
| if (attributes.pageRange === null) { | |
| for (i = 1; i <= totalPage; i++) { | |
| if (i == currentPage) { | |
| html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName} ${activeClassName}" data-num="${i}"><a>${i}</a></li>`; | |
| } else { | |
| html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName}" data-num="${i}">${getPageLinkTag(i)}</li>`; | |
| } | |
| } | |
| return html; | |
| } | |
| if (rangeStart <= 3) { | |
| for (i = 1; i < rangeStart; i++) { | |
| if (i == currentPage) { | |
| html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName} ${activeClassName}" data-num="${i}"><a>${i}</a></li>`; | |
| } else { | |
| html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName}" data-num="${i}">${getPageLinkTag(i)}</li>`; | |
| } | |
| } | |
| } else { | |
| if (!attributes.hideFirstOnEllipsisShow) { | |
| html += `<li class="${classPrefix}-page ${classPrefix}-first J-paginationjs-page ${pageClassName}" data-num="1">${getPageLinkTag(1)}</li>`; | |
| } | |
| html += `<li class="${classPrefix}-ellipsis ${disableClassName}"><a>${ellipsisText}</a></li>`; | |
| } | |
| for (i = rangeStart; i <= rangeEnd; i++) { | |
| if (i == currentPage) { | |
| html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName} ${activeClassName}" data-num="${i}"><a>${i}</a></li>`; | |
| } else { | |
| html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName}" data-num="${i}">${getPageLinkTag(i)}</li>`; | |
| } | |
| } | |
| if (rangeEnd >= totalPage - 2) { | |
| for (i = rangeEnd + 1; i <= totalPage; i++) { | |
| html += `<li class="${classPrefix}-page J-paginationjs-page ${pageClassName}" data-num="${i}">${getPageLinkTag(i)}</li>`; | |
| } | |
| } else { | |
| html += `<li class="${classPrefix}-ellipsis ${disableClassName}"><a>${ellipsisText}</a></li>`; | |
| if (!attributes.hideLastOnEllipsisShow) { | |
| html += `<li class="${classPrefix}-page ${classPrefix}-last J-paginationjs-page ${pageClassName}" data-num="${totalPage}">${getPageLinkTag(totalPage)}</li>`; | |
| } | |
| } | |
| return html; | |
| }, | |
| // Generate HTML content | |
| generateHTML: function(args) { | |
| var self = this; | |
| var currentPage = args.currentPage; | |
| var totalPage = self.getTotalPage(); | |
| var getPageLinkTag = self.getPageLinkTag; | |
| var totalNumber = self.getTotalNumber(); | |
| var pageSize = attributes.pageSize; | |
| var showPrevious = attributes.showPrevious; | |
| var showNext = attributes.showNext; | |
| var showPageNumbers = attributes.showPageNumbers; | |
| var showNavigator = attributes.showNavigator; | |
| var showSizeChanger = attributes.showSizeChanger; | |
| var sizeChangerOptions = attributes.sizeChangerOptions; | |
| var showGoInput = attributes.showGoInput; | |
| var showGoButton = attributes.showGoButton; | |
| var prevText = attributes.prevText; | |
| var nextText = attributes.nextText; | |
| var goButtonText = attributes.goButtonText; | |
| var classPrefix = attributes.classPrefix; | |
| var disableClassName = attributes.disableClassName || ''; | |
| var ulClassName = attributes.ulClassName || ''; | |
| var prevClassName = attributes.prevClassName || ''; | |
| var nextClassName = attributes.nextClassName || ''; | |
| var html = ''; | |
| var sizeSelect = `<select class="J-paginationjs-size-select">`; | |
| var goInput = '<input type="text" class="J-paginationjs-go-pagenumber">'; | |
| var goButton = `<input type="button" class="J-paginationjs-go-button" value="${goButtonText}">`; | |
| var formattedString; | |
| var formatSizeChanger = typeof attributes.formatSizeChanger === 'function' ? attributes.formatSizeChanger(currentPage, totalPage, totalNumber) : attributes.formatSizeChanger; | |
| var formatNavigator = typeof attributes.formatNavigator === 'function' ? attributes.formatNavigator(currentPage, totalPage, totalNumber) : attributes.formatNavigator; | |
| var formatGoInput = typeof attributes.formatGoInput === 'function' ? attributes.formatGoInput(goInput, currentPage, totalPage, totalNumber) : attributes.formatGoInput; | |
| var formatGoButton = typeof attributes.formatGoButton === 'function' ? attributes.formatGoButton(goButton, currentPage, totalPage, totalNumber) : attributes.formatGoButton; | |
| var autoHidePrevious = typeof attributes.autoHidePrevious === 'function' ? attributes.autoHidePrevious() : attributes.autoHidePrevious; | |
| var autoHideNext = typeof attributes.autoHideNext === 'function' ? attributes.autoHideNext() : attributes.autoHideNext; | |
| var header = typeof attributes.header === 'function' ? attributes.header(currentPage, totalPage, totalNumber) : attributes.header; | |
| var footer = typeof attributes.footer === 'function' ? attributes.footer(currentPage, totalPage, totalNumber) : attributes.footer; | |
| // Prepend extra contents to the pagination buttons | |
| if (header) { | |
| formattedString = self.replaceVariables(header, { | |
| currentPage: currentPage, | |
| totalPage: totalPage, | |
| totalNumber: totalNumber | |
| }); | |
| html += formattedString; | |
| } | |
| // Whether to display navigator | |
| if (showNavigator) { | |
| if (formatNavigator) { | |
| formattedString = self.replaceVariables(formatNavigator, { | |
| currentPage: currentPage, | |
| totalPage: totalPage, | |
| totalNumber: totalNumber, | |
| rangeStart: (currentPage - 1) * pageSize + 1, | |
| rangeEnd: Math.min(currentPage * pageSize, totalNumber) | |
| }); | |
| html += `<div class="${classPrefix}-nav J-paginationjs-nav">${formattedString}</div>`; | |
| } | |
| } | |
| if (showPrevious || showPageNumbers || showNext) { | |
| html += '<div class="paginationjs-pages">'; | |
| if (ulClassName) { | |
| html += `<ul class="${ulClassName}">`; | |
| } else { | |
| html += '<ul>'; | |
| } | |
| // Whether to display Previous button | |
| if (showPrevious) { | |
| if (currentPage <= 1) { | |
| if (!autoHidePrevious) { | |
| html += `<li class="${classPrefix}-prev ${disableClassName} ${prevClassName}"><a>${prevText}</a></li>`; | |
| } | |
| } else { | |
| html += `<li class="${classPrefix}-prev J-paginationjs-previous ${prevClassName}" data-num="${currentPage - 1}" title="Previous page">${getPageLinkTag(prevText)}</li>`; | |
| } | |
| } | |
| // Whether to display page numbers | |
| if (showPageNumbers) { | |
| html += self.generatePageNumbersHTML(args); | |
| } | |
| // Whether to display Next button | |
| if (showNext) { | |
| if (currentPage >= totalPage) { | |
| if (!autoHideNext) { | |
| html += `<li class="${classPrefix}-next ${disableClassName} ${nextClassName}"><a>${nextText}</a></li>`; | |
| } | |
| } else { | |
| html += `<li class="${classPrefix}-next J-paginationjs-next ${nextClassName}" data-num="${currentPage + 1}" title="Next page">${getPageLinkTag(nextText)}</li>`; | |
| } | |
| } | |
| html += `</ul></div>`; | |
| } | |
| if (showSizeChanger) { | |
| if (Helpers.isArray(sizeChangerOptions)) { | |
| if (sizeChangerOptions.indexOf(pageSize) === -1) { | |
| sizeChangerOptions.unshift(pageSize); | |
| sizeChangerOptions.sort((a, b) => a - b); | |
| } | |
| for (let i = 0; i < sizeChangerOptions.length; i++) { | |
| sizeSelect += `<option value="${sizeChangerOptions[i]}"${(sizeChangerOptions[i] === pageSize ? ' selected' : '')}>${sizeChangerOptions[i]} / page</option>`; | |
| } | |
| sizeSelect += `</select>`; | |
| formattedString = sizeSelect; | |
| if (formatSizeChanger) { | |
| formattedString = self.replaceVariables(formatSizeChanger, { | |
| length: sizeSelect, | |
| total: totalNumber | |
| }); | |
| } | |
| html += `<div class="paginationjs-size-changer">${formattedString}</div>`; | |
| } | |
| } | |
| // Whether to display Go input | |
| if (showGoInput) { | |
| if (formatGoInput) { | |
| formattedString = self.replaceVariables(formatGoInput, { | |
| currentPage: currentPage, | |
| totalPage: totalPage, | |
| totalNumber: totalNumber, | |
| input: goInput | |
| }); | |
| html += `<div class="${classPrefix}-go-input">${formattedString}</div>`; | |
| } | |
| } | |
| // Whether to display Go button | |
| if (showGoButton) { | |
| if (formatGoButton) { | |
| formattedString = self.replaceVariables(formatGoButton, { | |
| currentPage: currentPage, | |
| totalPage: totalPage, | |
| totalNumber: totalNumber, | |
| button: goButton | |
| }); | |
| html += `<div class="${classPrefix}-go-button">${formattedString}</div>`; | |
| } | |
| } | |
| // Append extra contents to the pagination buttons | |
| if (footer) { | |
| formattedString = self.replaceVariables(footer, { | |
| currentPage: currentPage, | |
| totalPage: totalPage, | |
| totalNumber: totalNumber | |
| }); | |
| html += formattedString; | |
| } | |
| return html; | |
| }, | |
| // dataSource is a request URL and a 'totalNumberLocator' function specified | |
| // execute it to find out 'totalNumber' from the response | |
| findTotalNumberFromRemoteResponse: function(response) { | |
| var self = this; | |
| self.model.totalNumber = attributes.totalNumberLocator(response); | |
| }, | |
| // Go to the specified page | |
| go: function(number, callback) { | |
| var self = this; | |
| var model = self.model; | |
| if (self.disabled) return; | |
| var pageNumber = number; | |
| pageNumber = parseInt(pageNumber); | |
| if (!pageNumber || pageNumber < 1) return; | |
| var pageSize = attributes.pageSize; | |
| var totalNumber = self.getTotalNumber(); | |
| var totalPage = self.getTotalPage(); | |
| if (totalNumber > 0 && pageNumber > totalPage) return; | |
| // Pick paging data in synchronous mode | |
| if (!self.isAsync) { | |
| render(self.getPagingData(pageNumber)); | |
| return; | |
| } | |
| var postData = {}; | |
| var alias = attributes.alias || {}; | |
| var pageSizeName = alias.pageSize ? alias.pageSize : 'pageSize'; | |
| var pageNumberName = alias.pageNumber ? alias.pageNumber : 'pageNumber'; | |
| postData[pageSizeName] = pageSize; | |
| postData[pageNumberName] = pageNumber; | |
| var ajaxParams = typeof attributes.ajax === 'function' ? attributes.ajax() : attributes.ajax; | |
| // If the pageNumber's value starts with 0 via Ajax | |
| if (ajaxParams && ajaxParams.pageNumberStartWithZero) { | |
| postData[pageNumberName] = pageNumber - 1; | |
| } | |
| var formatAjaxParams = { | |
| type: 'get', | |
| cache: false, | |
| data: {}, | |
| contentType: 'application/x-www-form-urlencoded; charset=UTF-8', | |
| dataType: 'json', | |
| async: true | |
| }; | |
| $.extend(true, formatAjaxParams, ajaxParams); | |
| $.extend(formatAjaxParams.data, postData); | |
| formatAjaxParams.url = attributes.dataSource; | |
| formatAjaxParams.success = function(response) { | |
| try { | |
| self.model.originalResponse = response; | |
| if (self.isDynamicTotalNumber) { | |
| self.findTotalNumberFromRemoteResponse(response); | |
| } else { | |
| self.model.totalNumber = attributes.totalNumber; | |
| } | |
| var finalData = self.filterDataWithLocator(response); | |
| render(finalData); | |
| } catch (e) { | |
| if(typeof attributes.onError === 'function') { | |
| attributes.onError(e, 'ajaxSuccessHandlerError'); | |
| } else { | |
| throw e; | |
| } | |
| } | |
| }; | |
| formatAjaxParams.error = function(jqXHR, textStatus, errorThrown) { | |
| attributes.formatAjaxError && attributes.formatAjaxError(jqXHR, textStatus, errorThrown); | |
| self.enable(); | |
| }; | |
| self.disable(); | |
| if (attributes.ajaxFunction) { | |
| attributes.ajaxFunction(formatAjaxParams); | |
| } else { | |
| $.ajax(formatAjaxParams); | |
| } | |
| function render(data) { | |
| if (self.callHook('beforePaging', pageNumber) === false) return false; | |
| // Pagination direction | |
| model.direction = typeof model.pageNumber === 'undefined' ? 0 : (pageNumber > model.pageNumber ? 1 : -1); | |
| model.pageNumber = pageNumber; | |
| self.render(); | |
| if (self.disabled && self.isAsync) { | |
| // enable pagination | |
| self.enable(); | |
| } | |
| // cache model data | |
| container.data('pagination').model = model; | |
| // format result data before callback invoked | |
| if (attributes.formatResult) { | |
| var cloneData = $.extend(true, [], data); | |
| if (!Helpers.isArray(data = attributes.formatResult(cloneData))) { | |
| data = cloneData; | |
| } | |
| } | |
| container.data('pagination').currentPageData = data; | |
| self.doCallback(data, callback); | |
| self.callHook('afterPaging', pageNumber); | |
| if (pageNumber == 1) { | |
| self.callHook('afterIsFirstPage'); | |
| } else if (pageNumber == self.getTotalPage()) { | |
| self.callHook('afterIsLastPage'); | |
| } | |
| } | |
| }, | |
| doCallback: function(data, customCallback) { | |
| var self = this; | |
| var model = self.model; | |
| if (typeof customCallback === 'function') { | |
| customCallback(data, model); | |
| } else if (typeof attributes.callback === 'function') { | |
| attributes.callback(data, model); | |
| } | |
| }, | |
| destroy: function() { | |
| if (this.callHook('beforeDestroy') === false) return; | |
| this.model.el.remove(); | |
| container.off(); | |
| // Remove style element | |
| $('#paginationjs-style').remove(); | |
| this.callHook('afterDestroy'); | |
| }, | |
| previous: function(callback) { | |
| this.go(this.model.pageNumber - 1, callback); | |
| }, | |
| next: function(callback) { | |
| this.go(this.model.pageNumber + 1, callback); | |
| }, | |
| disable: function() { | |
| var self = this; | |
| var source = self.isAsync ? 'async' : 'sync'; | |
| if (self.callHook('beforeDisable', source) === false) return; | |
| self.disabled = true; | |
| self.model.disabled = true; | |
| self.callHook('afterDisable', source); | |
| }, | |
| enable: function() { | |
| var self = this; | |
| var source = self.isAsync ? 'async' : 'sync'; | |
| if (self.callHook('beforeEnable', source) === false) return; | |
| self.disabled = false; | |
| self.model.disabled = false; | |
| self.callHook('afterEnable', source); | |
| }, | |
| refresh: function(callback) { | |
| this.go(this.model.pageNumber, callback); | |
| }, | |
| show: function() { | |
| var self = this; | |
| if (self.model.el.is(':visible')) return; | |
| self.model.el.show(); | |
| }, | |
| hide: function() { | |
| var self = this; | |
| if (!self.model.el.is(':visible')) return; | |
| self.model.el.hide(); | |
| }, | |
| // Replace variables for template string | |
| replaceVariables: function(template, variables) { | |
| var formattedString; | |
| for (var key in variables) { | |
| var value = variables[key]; | |
| var regexp = new RegExp('<%=\\s*' + key + '\\s*%>', 'img'); | |
| formattedString = (formattedString || template).replace(regexp, value); | |
| } | |
| return formattedString; | |
| }, | |
| getPagingData: function(number) { | |
| var pageSize = attributes.pageSize; | |
| var dataSource = attributes.dataSource; | |
| var totalNumber = this.getTotalNumber(); | |
| var start = pageSize * (number - 1) + 1; | |
| var end = Math.min(number * pageSize, totalNumber); | |
| return dataSource.slice(start - 1, end); | |
| }, | |
| getTotalNumber: function() { | |
| return this.model.totalNumber || attributes.totalNumber || 0; | |
| }, | |
| getTotalPage: function() { | |
| return Math.ceil(this.getTotalNumber() / attributes.pageSize); | |
| }, | |
| getLocator: function(locator) { | |
| var result; | |
| if (typeof locator === 'string') { | |
| result = locator; | |
| } else if (typeof locator === 'function') { | |
| result = locator(); | |
| } else { | |
| throwError('"locator" is incorrect. Expect string or function type.'); | |
| } | |
| return result; | |
| }, | |
| // Filter data with "locator" | |
| filterDataWithLocator: function(dataSource) { | |
| var locator = this.getLocator(attributes.locator); | |
| var filteredData; | |
| // Datasource is an Object, use "locator" to locate available data | |
| if (Helpers.isObject(dataSource)) { | |
| try { | |
| $.each(locator.split('.'), function(index, item) { | |
| filteredData = (filteredData ? filteredData : dataSource)[item]; | |
| }); | |
| } | |
| catch (e) { | |
| // ignore | |
| } | |
| if (!filteredData) { | |
| throwError('dataSource.' + locator + ' is undefined.'); | |
| } else if (!Helpers.isArray(filteredData)) { | |
| throwError('dataSource.' + locator + ' should be an Array.'); | |
| } | |
| } | |
| return filteredData || dataSource; | |
| }, | |
| parseDataSource: function(dataSource, callback) { | |
| var self = this; | |
| if (Helpers.isObject(dataSource)) { | |
| callback(attributes.dataSource = self.filterDataWithLocator(dataSource)); | |
| } else if (Helpers.isArray(dataSource)) { | |
| callback(attributes.dataSource = dataSource); | |
| } else if (typeof dataSource === 'function') { | |
| attributes.dataSource(function(data) { | |
| if (!Helpers.isArray(data)) { | |
| throwError('The parameter of "done" Function should be an Array.'); | |
| } | |
| self.parseDataSource.call(self, data, callback); | |
| }); | |
| } else if (typeof dataSource === 'string') { | |
| if (/^https?|file:/.test(dataSource)) { | |
| attributes.ajaxDataType = 'jsonp'; | |
| } | |
| callback(dataSource); | |
| } else { | |
| throwError('Unexpected dataSource type'); | |
| } | |
| }, | |
| callHook: function(hook) { | |
| var paginationData = container.data('pagination') || {}; | |
| var result; | |
| var args = Array.prototype.slice.apply(arguments); | |
| args.shift(); | |
| if (attributes[hook] && typeof attributes[hook] === 'function') { | |
| if (attributes[hook].apply(global, args) === false) { | |
| result = false; | |
| } | |
| } | |
| if (paginationData.hooks && paginationData.hooks[hook]) { | |
| $.each(paginationData.hooks[hook], function(index, item) { | |
| if (item.apply(global, args) === false) { | |
| result = false; | |
| } | |
| }); | |
| } | |
| return result !== false; | |
| }, | |
| observer: function() { | |
| var self = this; | |
| var el = self.model.el; | |
| // Go to specified page number | |
| container.on(eventPrefix + 'go', function(event, pageNumber, done) { | |
| if (typeof pageNumber === 'string') { | |
| pageNumber = parseInt(pageNumber.trim()); | |
| } | |
| if (!pageNumber) return; | |
| if (typeof pageNumber !== 'number') { | |
| throwError('"pageNumber" is incorrect. (Number)'); | |
| } | |
| self.go(pageNumber, done); | |
| }); | |
| // Page number button click listener | |
| el.on('click', '.J-paginationjs-page', function(event) { | |
| var current = $(event.currentTarget); | |
| var pageNumber = current.attr('data-num').trim(); | |
| if (!pageNumber || current.hasClass(attributes.disableClassName) || current.hasClass(attributes.activeClassName)) return; | |
| if (self.callHook('beforePageOnClick', event, pageNumber) === false) return false; | |
| self.go(pageNumber); | |
| self.callHook('afterPageOnClick', event, pageNumber); | |
| if (!attributes.pageLink) return false; | |
| }); | |
| // Previous button click listener | |
| el.on('click', '.J-paginationjs-previous', function(event) { | |
| var current = $(event.currentTarget); | |
| var pageNumber = current.attr('data-num').trim(); | |
| if (!pageNumber || current.hasClass(attributes.disableClassName)) return; | |
| if (self.callHook('beforePreviousOnClick', event, pageNumber) === false) return false; | |
| self.go(pageNumber); | |
| self.callHook('afterPreviousOnClick', event, pageNumber); | |
| if (!attributes.pageLink) return false; | |
| }); | |
| // Next button click listener | |
| el.on('click', '.J-paginationjs-next', function(event) { | |
| var current = $(event.currentTarget); | |
| var pageNumber = current.attr('data-num').trim(); | |
| if (!pageNumber || current.hasClass(attributes.disableClassName)) return; | |
| if (self.callHook('beforeNextOnClick', event, pageNumber) === false) return false; | |
| self.go(pageNumber); | |
| self.callHook('afterNextOnClick', event, pageNumber); | |
| if (!attributes.pageLink) return false; | |
| }); | |
| // Go button click listener | |
| el.on('click', '.J-paginationjs-go-button', function(event) { | |
| var pageNumber = $('.J-paginationjs-go-pagenumber', el).val(); | |
| if (self.callHook('beforeGoButtonOnClick', event, pageNumber) === false) return false; | |
| container.trigger(eventPrefix + 'go', pageNumber); | |
| self.callHook('afterGoButtonOnClick', event, pageNumber); | |
| }); | |
| // go input enter keyup listener | |
| el.on('keyup', '.J-paginationjs-go-pagenumber', function(event) { | |
| if (event.which === 13) { | |
| var pageNumber = $(event.currentTarget).val(); | |
| if (self.callHook('beforeGoInputOnEnter', event, pageNumber) === false) return false; | |
| container.trigger(eventPrefix + 'go', pageNumber); | |
| // Maintain the cursor | |
| $('.J-paginationjs-go-pagenumber', el).focus(); | |
| self.callHook('afterGoInputOnEnter', event, pageNumber); | |
| } | |
| }); | |
| el.on('change', '.J-paginationjs-size-select', function(event) { | |
| var current = $(event.currentTarget); | |
| var size = parseInt(current.val()); | |
| var currentPage = self.model.pageNumber || attributes.pageNumber; | |
| if (typeof size !== 'number') return; | |
| if (self.callHook('beforeSizeSelectorChange', event, size) === false) return false; | |
| attributes.pageSize = size; | |
| self.model.pageSize = size; | |
| self.model.totalPage = self.getTotalPage(); | |
| if (currentPage > self.model.totalPage) { | |
| currentPage = self.model.totalPage; | |
| } | |
| self.go(currentPage); | |
| self.callHook('afterSizeSelectorChange', event, size); | |
| if (!attributes.pageLink) return false; | |
| }); | |
| // Previous page | |
| container.on(eventPrefix + 'previous', function(event, done) { | |
| self.previous(done); | |
| }); | |
| // Next page | |
| container.on(eventPrefix + 'next', function(event, done) { | |
| self.next(done); | |
| }); | |
| // Disable | |
| container.on(eventPrefix + 'disable', function() { | |
| self.disable(); | |
| }); | |
| // Enable | |
| container.on(eventPrefix + 'enable', function() { | |
| self.enable(); | |
| }); | |
| // Refresh | |
| container.on(eventPrefix + 'refresh', function(event, done) { | |
| self.refresh(done); | |
| }); | |
| // Show | |
| container.on(eventPrefix + 'show', function() { | |
| self.show(); | |
| }); | |
| // Hide | |
| container.on(eventPrefix + 'hide', function() { | |
| self.hide(); | |
| }); | |
| // Destroy | |
| container.on(eventPrefix + 'destroy', function() { | |
| self.destroy(); | |
| }); | |
| // Whether to load the default page | |
| var validTotalPage = Math.max(self.getTotalPage(), 1) | |
| var defaultPageNumber = attributes.pageNumber; | |
| // Default pageNumber should be 1 when totalNumber is dynamic | |
| if (self.isDynamicTotalNumber) { | |
| if (attributes.resetPageNumberOnInit) defaultPageNumber = 1; | |
| } | |
| if (attributes.triggerPagingOnInit) { | |
| container.trigger(eventPrefix + 'go', Math.min(defaultPageNumber, validTotalPage)); | |
| } | |
| } | |
| }; | |
| // Pagination has been initialized | |
| if (container.data('pagination') && container.data('pagination').initialized === true) { | |
| // Handle events | |
| if (isNumeric(options)) { | |
| // eg: container.pagination(5) | |
| container.trigger.call(this, eventPrefix + 'go', options, arguments[1]); | |
| return this; | |
| } else if (typeof options === 'string') { | |
| var args = Array.prototype.slice.apply(arguments); | |
| args[0] = eventPrefix + args[0]; | |
| switch (options) { | |
| case 'previous': | |
| case 'next': | |
| case 'go': | |
| case 'disable': | |
| case 'enable': | |
| case 'refresh': | |
| case 'show': | |
| case 'hide': | |
| case 'destroy': | |
| container.trigger.apply(this, args); | |
| break; | |
| case 'getSelectedPageNum': | |
| case 'getCurrentPageNum': | |
| if (container.data('pagination').model) { | |
| return container.data('pagination').model.pageNumber; | |
| } else { | |
| return container.data('pagination').attributes.pageNumber; | |
| } | |
| case 'getTotalPage': | |
| return Math.ceil(container.data('pagination').model.totalNumber / container.data('pagination').model.pageSize); | |
| case 'getSelectedPageData': | |
| case 'getCurrentPageData': | |
| return container.data('pagination').currentPageData; | |
| // Whether pagination has been disabled | |
| case 'isDisabled': | |
| return container.data('pagination').model.disabled === true; | |
| default: | |
| throwError('Unknown action: ' + options); | |
| } | |
| return this; | |
| } else { | |
| // Uninstall the old instance before initializing a new one | |
| uninstallPlugin(container); | |
| } | |
| } else { | |
| if (!Helpers.isObject(options)) throwError('Illegal options'); | |
| } | |
| // Check parameters | |
| parameterChecker(attributes); | |
| pagination.initialize(); | |
| return this; | |
| }; | |
| // Instance defaults | |
| $.fn[pluginName].defaults = { | |
| // Data source | |
| // Array | String | Function | Object | |
| //dataSource: '', | |
| // String | Function | |
| //locator: 'data', | |
| // Function | |
| //totalNumberLocator: function() {}, | |
| // Total number of data items | |
| totalNumber: 0, | |
| // Default page number | |
| pageNumber: 1, | |
| // Number of data items per page | |
| pageSize: 10, | |
| // Page range (pages around current page) | |
| pageRange: 2, | |
| // Whether to display the 'Previous' button | |
| showPrevious: true, | |
| // Whether to display the 'Next' button | |
| showNext: true, | |
| // Whether to display the page buttons | |
| showPageNumbers: true, | |
| showNavigator: false, | |
| // Whether to display the 'Go' input | |
| showGoInput: false, | |
| // Whether to display the 'Go' button | |
| showGoButton: false, | |
| showSizeChanger: false, | |
| sizeChangerOptions: [10, 20, 50, 100], | |
| // Page link | |
| pageLink: '', | |
| // 'Previous' text | |
| prevText: '‹', | |
| // 'Next' text | |
| nextText: '›', | |
| // Ellipsis text | |
| ellipsisText: '...', | |
| // 'Go' button text | |
| goButtonText: 'Go', | |
| // Additional class name(s) for the Pagination container | |
| //className: '', | |
| classPrefix: 'paginationjs', | |
| activeClassName: 'active', | |
| // class name when disabled | |
| disableClassName: 'disabled', | |
| //ulClassName: '', | |
| //pageClassName: '', | |
| //prevClassName: '', | |
| //nextClassName: '', | |
| formatNavigator: 'Total <%= totalNumber %> items', | |
| formatGoInput: '<%= input %>', | |
| formatGoButton: '<%= button %>', | |
| // position in the container | |
| position: 'bottom', | |
| // Auto hide previous button when current page is the first | |
| autoHidePrevious: false, | |
| // Auto hide next button when current page is the last | |
| autoHideNext: false, | |
| //header: '', | |
| //footer: '', | |
| //alias: {}, | |
| // Whether to trigger pagination at initialization | |
| triggerPagingOnInit: true, | |
| // Whether to reset page number at initialization, it works only if dataSource is a URL and totalNumberLocator is specified | |
| resetPageNumberOnInit: true, | |
| // Whether to hide pagination when less than one page | |
| hideOnlyOnePage: false, | |
| hideFirstOnEllipsisShow: false, | |
| hideLastOnEllipsisShow: false, | |
| // Customize item's innerHTML | |
| callback: function() {} | |
| }; | |
| // Hook register | |
| $.fn[pluginHookMethod] = function(hook, callback) { | |
| if (arguments.length < 2) { | |
| throwError('Expect 2 arguments at least.'); | |
| } | |
| if (typeof callback !== 'function') { | |
| throwError('callback should be a function.'); | |
| } | |
| var container = $(this); | |
| var paginationData = container.data('pagination'); | |
| if (!paginationData) { | |
| container.data('pagination', {}); | |
| paginationData = container.data('pagination'); | |
| } | |
| !paginationData.hooks && (paginationData.hooks = {}); | |
| //paginationData.hooks[hook] = callback; | |
| paginationData.hooks[hook] = paginationData.hooks[hook] || []; | |
| paginationData.hooks[hook].push(callback); | |
| }; | |
| // Static method | |
| $[pluginName] = function(selector, options) { | |
| if (arguments.length < 2) { | |
| throwError('Requires two parameters.'); | |
| } | |
| var container; | |
| // 'selector' is a jQuery object | |
| if (typeof selector !== 'string' && selector instanceof jQuery) { | |
| container = selector; | |
| } else { | |
| container = $(selector); | |
| } | |
| if (!container.length) return; | |
| container.pagination(options); | |
| return container; | |
| }; | |
| // ============================================================ | |
| // helpers | |
| // ============================================================ | |
| var Helpers = {}; | |
| // Throw error | |
| function throwError(content) { | |
| throw new Error('Pagination: ' + content); | |
| } | |
| // Check parameters | |
| function parameterChecker(args) { | |
| if (!args.dataSource) { | |
| throwError('"dataSource" is required.'); | |
| } | |
| if (typeof args.dataSource === 'string') { | |
| if (args.totalNumberLocator === undefined) { | |
| if (args.totalNumber === undefined) { | |
| throwError('"totalNumber" is required.'); | |
| } else if (!isNumeric(args.totalNumber)) { | |
| throwError('"totalNumber" is incorrect. Expect numberic type'); | |
| } | |
| } else { | |
| if (typeof args.totalNumberLocator !== 'function') { | |
| throwError('"totalNumberLocator" should be a Function.'); | |
| } | |
| } | |
| } else if (Helpers.isObject(args.dataSource)) { | |
| if (typeof args.locator === 'undefined') { | |
| throwError('"dataSource" is an Object, please specify a "locator".'); | |
| } else if (typeof args.locator !== 'string' && typeof args.locator !== 'function') { | |
| throwError('' + args.locator + ' is incorrect. Expect string or function type'); | |
| } | |
| } | |
| if (args.formatResult !== undefined && typeof args.formatResult !== 'function') { | |
| throwError('"formatResult" should be a Function.'); | |
| } | |
| if (args.onError !== undefined && typeof args.onError !== 'function') { | |
| throwError('"onError" should be a Function.'); | |
| } | |
| } | |
| // uninstall plugin | |
| function uninstallPlugin(target) { | |
| var events = ['go', 'previous', 'next', 'disable', 'enable', 'refresh', 'show', 'hide', 'destroy']; | |
| // off all events | |
| $.each(events, function(index, value) { | |
| target.off(eventPrefix + value); | |
| }); | |
| // reset pagination data | |
| target.data('pagination', {}); | |
| // remove pagination element | |
| $('.paginationjs', target).remove(); | |
| } | |
| // Object type detection | |
| function getObjectType(object, tmp) { | |
| return ( (tmp = typeof(object)) == "object" ? object == null && "null" || Object.prototype.toString.call(object).slice(8, -1) : tmp ).toLowerCase(); | |
| } | |
| function isNumeric(n) { | |
| return !isNaN(parseFloat(n)) && isFinite(n); | |
| } | |
| $.each(['Object', 'Array', 'String'], function(index, name) { | |
| Helpers['is' + name] = function(object) { | |
| return getObjectType(object) === name.toLowerCase(); | |
| }; | |
| }); | |
| /* | |
| * export via AMD or CommonJS | |
| * */ | |
| if (typeof define === 'function' && define.amd) { | |
| define(function() { | |
| return $; | |
| }); | |
| } | |
| })(this, window.jQuery); | |