jquery.pagination-1.2.7.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. /*!
  2. * jQuery Pagination Plugin
  3. * http://mricle.com/JqueryPagination
  4. * GitHub: https://github.com/mricle/pagination
  5. * Version: 1.2.7
  6. * Date: 2015-6-12
  7. *
  8. * Copyright 2015 Mricle
  9. * Released under the MIT license
  10. */
  11. !function ($) {
  12. "use strict";
  13. var pageEvent = {
  14. pageClicked: 'pageClicked',
  15. jumpClicked: 'jumpClicked',
  16. pageSizeChanged: 'pageSizeChanged'
  17. }
  18. var Page = function (element, options) {
  19. var defaultOption = {
  20. pageSize: 10,
  21. pageBtnCount: 11,
  22. showFirstLastBtn: true,
  23. firstBtnText: null,
  24. lastBtnText: null,
  25. prevBtnText: "«",
  26. nextBtnText: "»",
  27. loadFirstPage: true,
  28. remote: {
  29. url: null,
  30. params: null,
  31. callback: null,
  32. success: null,
  33. beforeSend: null,
  34. complete: null,
  35. pageIndexName: 'pageIndex',
  36. pageSizeName: 'pageSize',
  37. totalName: 'total'
  38. },
  39. showInfo: false,
  40. infoFormat: '{start} ~ {end} of {total} entires',
  41. showJump: false,
  42. jumpBtnText: 'Go',
  43. showPageSizes: false,
  44. pageSizeItems: null,
  45. debug: false
  46. }
  47. this.$element = $(element);
  48. this.$page = $('<ul class="m-pagination-page"></ul>');
  49. this.$size = $('<div class="m-pagination-size"></div>');
  50. this.$jump = $('<div class="m-pagination-jump"></div>');
  51. this.$info = $('<div class="m-pagination-info"></div>');
  52. this.options = $.extend(true, {}, defaultOption, $.fn.page.defaults, options);
  53. this.total = this.options.total || 0;
  54. this.options.pageSizeItems = this.options.pageSizeItems || [5, 10, 15, 20],
  55. this.currentPageIndex = 0;
  56. this.currentPageSize = this.options.pageSize;
  57. this.pageCount = getPageCount(this.total, this.currentPageSize);
  58. if (this.options.remote.success == null) {
  59. this.options.remote.success = this.options.remote.callback;
  60. }
  61. var init = function (obj) {
  62. var that = obj;
  63. //init size module
  64. var html = $('<select data-page-btn="size"></select>');
  65. for (var i = 0; i < that.options.pageSizeItems.length; i++) {
  66. html.append('<option value="' + that.options.pageSizeItems[i] + '">' + that.options.pageSizeItems[i] + '</option>')
  67. }
  68. html.val(that.currentPageSize);
  69. that.$size.append(html);
  70. //init jump module
  71. var jumpHtml = '<div class="m-pagination-group"><input type="text"><button data-page-btn="jump" type="button">' + that.options.jumpBtnText + '</button></div>';
  72. that.$jump.append(jumpHtml);
  73. that.$jump.find('input').change(function () {
  74. if (!checkIsPageNumber(this.value, that.pageCount))
  75. this.value = null;
  76. });
  77. that.$element.append(that.$page.hide());
  78. that.$element.append(that.$size.hide());
  79. that.$element.append(that.$jump.hide());
  80. that.$element.append(that.$info.hide());
  81. that._remoteOrRedner(0);
  82. that.$element
  83. .on('click', { page: that }, function (event) { eventHandler(event); })
  84. .on('change', { page: that }, function (event) { eventHandler(event); });
  85. }
  86. var eventHandler = function (event) {
  87. var that = event.data.page;
  88. var $target = $(event.target);
  89. if (event.type === 'click' && $target.data('pageIndex') !== undefined && !$target.parent().hasClass('active')) {
  90. var pageIndex = $(event.target).data("pageIndex");
  91. that.$element.trigger(pageEvent.pageClicked, pageIndex);
  92. that.debug('event[ pageClicked ] : pageIndex = ' + (pageIndex));
  93. that._remoteOrRedner(pageIndex);
  94. }
  95. else if (event.type === 'click' && $target.data('pageBtn') === 'jump') {
  96. var pageIndexStr = that.$jump.find('input').val();
  97. if (checkIsPageNumber(pageIndexStr, that.pageCount)) {
  98. var pageIndex = pageIndexStr - 1;
  99. that.$element.trigger(pageEvent.jumpClicked, pageIndex);
  100. that.debug('event[ jumpClicked ] : pageIndex = ' + (pageIndex));
  101. that._remoteOrRedner(pageIndex);
  102. }
  103. that.$jump.find('input').val(null);
  104. }
  105. else if (event.type === 'change' && $target.data('pageBtn') === 'size') {
  106. var pageSize = that.$size.find('select').val();
  107. that.currentPageSize = pageSize;
  108. that.$element.trigger(pageEvent.pageSizeChanged, pageSize);
  109. that.debug('event[ pageSizeChanged ] : pageSize = ' + pageSize);
  110. that._remoteOrRedner(0);
  111. }
  112. }
  113. if (typeof this.options.total === 'undefined' && this.options.remote.url === null) {
  114. console && console.error("[init error] : the options must have the parameter of 'remote.url' or 'total'.");
  115. }
  116. else if (typeof this.options.total === 'undefined' && !this.options.loadFirstPage) {
  117. console && console.error("[init error] : if you don't remote the first page. you must set the options or 'total'.");
  118. }
  119. else {
  120. init(this);
  121. }
  122. }
  123. Page.prototype = {
  124. _remoteOrRedner: function (pageIndex) {
  125. if (this.options.remote.url != null && (this.options.loadFirstPage || pageIndex > 0))
  126. this.remote(pageIndex);
  127. else
  128. this.renderPagination(pageIndex);
  129. },
  130. remote: function (pageIndex, params) {
  131. var that = this;
  132. if (isNaN(parseInt(pageIndex)) || typeof pageIndex === "object") {
  133. params = pageIndex;
  134. pageIndex = null;
  135. }
  136. if (isNaN(parseInt(pageIndex))) {
  137. pageIndex = that.currentPageIndex;
  138. }
  139. var pageParams = {};
  140. pageParams[this.options.remote.pageIndexName] = pageIndex;
  141. pageParams[this.options.remote.pageSizeName] = this.currentPageSize;
  142. this.options.remote.params = deserializeParams(this.options.remote.params);
  143. if (params) {
  144. params = deserializeParams(params);
  145. this.options.remote.params = $.extend({}, this.options.remote.params, params);
  146. }
  147. var requestParams = $.extend({}, this.options.remote.params, pageParams);
  148. $.ajax({
  149. url: this.options.remote.url,
  150. dataType: 'json',
  151. data: requestParams,
  152. contentType: 'application/Json',
  153. async: false,
  154. beforeSend: function (XMLHttpRequest) {
  155. if (typeof that.options.remote.beforeSend === 'function') that.options.remote.beforeSend(XMLHttpRequest);
  156. },
  157. complete: function (XMLHttpRequest, textStatu) {
  158. if (typeof that.options.remote.complete === 'function') that.options.remote.complete(XMLHttpRequest, textStatu);
  159. },
  160. success: function (result) {
  161. that.debug("ajax request : params = " + JSON.stringify(requestParams), result);
  162. var total = GetCustomTotalName(result, that.options.remote.totalName);
  163. if (total == null || total == undefined) {
  164. console && console.error("the response of totalName : '" + that.options.remote.totalName + "' not found");
  165. } else {
  166. that._updateTotal(total);
  167. if (typeof that.options.remote.success === 'function') that.options.remote.success(result, pageIndex);
  168. that.renderPagination(pageIndex);
  169. }
  170. }
  171. })
  172. },
  173. renderPagination: function (pageIndex) {
  174. this.currentPageIndex = pageIndex;
  175. var pages = renderPages(this.currentPageIndex, this.currentPageSize, this.total, this.options.pageBtnCount,
  176. this.options.firstBtnText, this.options.lastBtnText, this.options.prevBtnText, this.options.nextBtnText, this.options.showFirstLastBtn);
  177. this.$page.empty().append(pages);
  178. this.$info.text(renderInfo(this.currentPageIndex, this.currentPageSize, this.total, this.options.infoFormat));
  179. if (this.pageCount > 1) {
  180. this.$page.show();
  181. if (this.options.showPageSizes) this.$size.show();
  182. if (this.options.showJump) this.$jump.show();
  183. if (this.options.showInfo) this.$info.show();
  184. }
  185. else if (this.pageCount == 1) {
  186. if (this.options.showInfo) this.$info.show();
  187. }
  188. else {
  189. this.$page.hide();
  190. this.$size.hide();
  191. this.$jump.hide();
  192. this.$info.hide();
  193. }
  194. },
  195. _updateTotal: function (total) {
  196. this.total = total;
  197. this.pageCount = getPageCount(total, this.currentPageSize);
  198. },
  199. destroy: function () {
  200. this.$element.unbind().data("page", null).empty();
  201. },
  202. debug: function (message, data) {
  203. if (this.options.debug && console) {
  204. message && console.info(message);
  205. data && console.info(data);
  206. }
  207. }
  208. }
  209. var renderInfo = function (currentPageIndex, currentPageSize, total, infoFormat) {
  210. var startNum = (currentPageIndex * currentPageSize) + 1;
  211. var endNum = (currentPageIndex + 1) * currentPageSize;
  212. endNum = endNum >= total ? total : endNum;
  213. return infoFormat.replace('{start}', startNum).replace('{end}', endNum).replace('{total}', total);
  214. }
  215. var renderPages = function (pageIndex, pageSize, total, pageBtnCount, firstBtnText, lastBtnText, prevBtnText, nextBtnText, showFirstLastBtn) {
  216. pageIndex = pageIndex == undefined ? 1 : parseInt(pageIndex) + 1; //set pageIndex from 1, convenient calculation page
  217. var pageCount = getPageCount(total, pageSize);
  218. var html = [];
  219. if (pageCount <= pageBtnCount) {
  220. html = renderPage(1, pageCount, pageIndex);
  221. }
  222. else {
  223. var firstPage = renderPerPage(firstBtnText || 1, 0);
  224. var lastPage = renderPerPage(lastBtnText || pageCount, pageCount - 1);
  225. var prevPage = renderPerPage(prevBtnText, pageIndex - 2);
  226. var nextPage = renderPerPage(nextBtnText, pageIndex);
  227. //button count of both sides
  228. var symmetryBtnCount = (pageBtnCount - 1 - 4) / 2;
  229. if (!showFirstLastBtn)
  230. symmetryBtnCount = symmetryBtnCount + 1;
  231. var frontBtnNum = (pageBtnCount + 1) / 2;
  232. var behindBtnNum = pageCount - ((pageBtnCount + 1) / 2);
  233. symmetryBtnCount = symmetryBtnCount.toString().indexOf('.') == -1 ? symmetryBtnCount : symmetryBtnCount + 0.5;
  234. frontBtnNum = frontBtnNum.toString().indexOf('.') == -1 ? frontBtnNum : frontBtnNum + 0.5;
  235. behindBtnNum = behindBtnNum.toString().indexOf('.') == -1 ? behindBtnNum : behindBtnNum + 0.5;
  236. if (pageIndex <= frontBtnNum) {
  237. if (showFirstLastBtn) {
  238. html = renderPage(1, pageBtnCount - 2, pageIndex);
  239. html.push(nextPage);
  240. html.push(lastPage);
  241. } else {
  242. html = renderPagenderPage(1, pageBtnCount - 1, pageIndex);
  243. html.push(nextPage);
  244. }
  245. }
  246. else if (pageIndex > behindBtnNum) {
  247. if (showFirstLastBtn) {
  248. html = renderPage(pageCount - pageBtnCount + 3, pageBtnCount - 2, pageIndex);
  249. html.unshift(prevPage);
  250. html.unshift(firstPage);
  251. } else {
  252. html = renderPage(pageCount - pageBtnCount + 2, pageBtnCount - 1, pageIndex);
  253. html.unshift(prevPage);
  254. }
  255. }
  256. else {
  257. if (showFirstLastBtn) {
  258. html = renderPage(pageIndex - symmetryBtnCount, pageBtnCount - 4, pageIndex);
  259. html.unshift(prevPage);
  260. html.push(nextPage);
  261. html.unshift(firstPage);
  262. html.push(lastPage);
  263. } else {
  264. html = renderPage(pageIndex - symmetryBtnCount, pageBtnCount - 2, pageIndex);
  265. html.unshift(prevPage);
  266. html.push(nextPage);
  267. }
  268. }
  269. }
  270. return html;
  271. }
  272. var renderPage = function (beginPageNum, count, currentPage) {
  273. var html = [];
  274. for (var i = 0; i < count; i++) {
  275. var page = renderPerPage(beginPageNum, beginPageNum - 1);
  276. if (beginPageNum == currentPage)
  277. page.addClass("active");
  278. html.push(page);
  279. beginPageNum++;
  280. }
  281. return html;
  282. }
  283. var renderPerPage = function (text, value) {
  284. return $("<li><a data-page-index='" + value + "'>" + text + "</a></li>");
  285. }
  286. var getPageCount = function (total, pageSize) {
  287. var pageCount = 0;
  288. var total = parseInt(total);
  289. var i = total / pageSize;
  290. pageCount = i.toString().indexOf('.') != -1 ? parseInt(i.toString().split('.')[0]) + 1 : i;
  291. return pageCount;
  292. }
  293. var deserializeParams = function (params) {
  294. var newParams = {};
  295. if (typeof params === 'string') {
  296. var arr = params.split('&');
  297. for (var i = 0; i < arr.length; i++) {
  298. var a = arr[i].split('=');
  299. newParams[a[0]] = decodeURIComponent(a[1]);
  300. }
  301. }
  302. else if (params instanceof Array) {
  303. for (var i = 0; i < params.length; i++) {
  304. newParams[params[i].name] = decodeURIComponent(params[i].value);
  305. }
  306. }
  307. else if (typeof params === 'object') {
  308. newParams = params;
  309. }
  310. return newParams;
  311. }
  312. var checkIsPageNumber = function (pageIndex, maxPage) {
  313. var reg = /^\+?[1-9][0-9]*$/;
  314. return reg.test(pageIndex) && parseInt(pageIndex) <= parseInt(maxPage);
  315. }
  316. var GetCustomTotalName = function (object, totalName) {
  317. var arr = totalName.split('.');
  318. var temp = object;
  319. var total = null;
  320. for (var i = 0; i < arr.length; i++) {
  321. temp = mapObjectName(temp, arr[i]);
  322. if (!isNaN(parseInt(temp))) {
  323. total = temp;
  324. break;
  325. }
  326. if (temp == null) {
  327. break;
  328. }
  329. }
  330. return total;
  331. }
  332. var mapObjectName = function (data, mapName) {
  333. for (var i in data) {
  334. if (i == mapName) {
  335. return data[i];
  336. }
  337. }
  338. return null;
  339. }
  340. $.fn.page = function (option) {
  341. var args = arguments;
  342. return this.each(function () {
  343. var $this = $(this);
  344. var data = $this.data('page');
  345. if (!data && (typeof option === 'object' || typeof option === 'undefined')) {
  346. var options = typeof option == 'object' && option;
  347. var data_api_options = $this.data();
  348. options = $.extend(options, data_api_options);
  349. $this.data('page', (data = new Page(this, options)));
  350. }
  351. else if (data && typeof option === 'string') {
  352. data[option].apply(data, Array.prototype.slice.call(args, 1));
  353. }
  354. else if (!data) {
  355. console && console.error("jQuery Pagination Plugin is uninitialized.");
  356. }
  357. });
  358. }
  359. }(window.jQuery)