jquery.simplePagination.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  1. /**
  2. * simplePagination.js v1.6
  3. * A simple jQuery pagination plugin.
  4. * http://flaviusmatis.github.com/simplePagination.js/
  5. *
  6. * Copyright 2012, Flavius Matis
  7. * Released under the MIT license.
  8. * http://flaviusmatis.github.com/license.html
  9. */
  10. (function($){
  11. var methods = {
  12. init: function(options) {
  13. var o = $.extend({
  14. items: 1,
  15. itemsOnPage: 1,
  16. pages: 0,
  17. displayedPages: 5,
  18. edges: 2,
  19. currentPage: 0,
  20. useAnchors: true,
  21. hrefTextPrefix: '#page-',
  22. hrefTextSuffix: '',
  23. prevText: 'Prev',
  24. nextText: 'Next',
  25. ellipseText: '…',
  26. ellipsePageSet: true,
  27. cssStyle: 'light-theme',
  28. listStyle: '',
  29. labelMap: [],
  30. selectOnClick: true,
  31. nextAtFront: false,
  32. invertPageOrder: false,
  33. useStartEdge : true,
  34. useEndEdge : true,
  35. onPageClick: function(pageNumber, event) {
  36. // Callback triggered when a page is clicked
  37. // Page number is given as an optional parameter
  38. },
  39. onInit: function() {
  40. // Callback triggered immediately after initialization
  41. }
  42. }, options || {});
  43. var self = this;
  44. o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
  45. if (o.currentPage)
  46. o.currentPage = o.currentPage - 1;
  47. else
  48. o.currentPage = !o.invertPageOrder ? 0 : o.pages - 1;
  49. o.halfDisplayed = o.displayedPages / 2;
  50. this.each(function() {
  51. self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o);
  52. methods._draw.call(self);
  53. });
  54. o.onInit();
  55. return this;
  56. },
  57. selectPage: function(page) {
  58. methods._selectPage.call(this, page - 1);
  59. return this;
  60. },
  61. prevPage: function() {
  62. var o = this.data('pagination');
  63. if (!o.invertPageOrder) {
  64. if (o.currentPage > 0) {
  65. methods._selectPage.call(this, o.currentPage - 1);
  66. }
  67. } else {
  68. if (o.currentPage < o.pages - 1) {
  69. methods._selectPage.call(this, o.currentPage + 1);
  70. }
  71. }
  72. return this;
  73. },
  74. nextPage: function() {
  75. var o = this.data('pagination');
  76. if (!o.invertPageOrder) {
  77. if (o.currentPage < o.pages - 1) {
  78. methods._selectPage.call(this, o.currentPage + 1);
  79. }
  80. } else {
  81. if (o.currentPage > 0) {
  82. methods._selectPage.call(this, o.currentPage - 1);
  83. }
  84. }
  85. return this;
  86. },
  87. getPagesCount: function() {
  88. return this.data('pagination').pages;
  89. },
  90. setPagesCount: function(count) {
  91. this.data('pagination').pages = count;
  92. },
  93. getCurrentPage: function () {
  94. return this.data('pagination').currentPage + 1;
  95. },
  96. destroy: function(){
  97. this.empty();
  98. return this;
  99. },
  100. drawPage: function (page) {
  101. var o = this.data('pagination');
  102. o.currentPage = page - 1;
  103. this.data('pagination', o);
  104. methods._draw.call(this);
  105. return this;
  106. },
  107. redraw: function(){
  108. methods._draw.call(this);
  109. return this;
  110. },
  111. disable: function(){
  112. var o = this.data('pagination');
  113. o.disabled = true;
  114. this.data('pagination', o);
  115. methods._draw.call(this);
  116. return this;
  117. },
  118. enable: function(){
  119. var o = this.data('pagination');
  120. o.disabled = false;
  121. this.data('pagination', o);
  122. methods._draw.call(this);
  123. return this;
  124. },
  125. updateItems: function (newItems) {
  126. var o = this.data('pagination');
  127. o.items = newItems;
  128. o.pages = methods._getPages(o);
  129. this.data('pagination', o);
  130. methods._draw.call(this);
  131. },
  132. updateItemsOnPage: function (itemsOnPage) {
  133. var o = this.data('pagination');
  134. o.itemsOnPage = itemsOnPage;
  135. o.pages = methods._getPages(o);
  136. this.data('pagination', o);
  137. methods._selectPage.call(this, 0);
  138. return this;
  139. },
  140. getItemsOnPage: function() {
  141. return this.data('pagination').itemsOnPage;
  142. },
  143. _draw: function() {
  144. var o = this.data('pagination'),
  145. interval = methods._getInterval(o),
  146. i,
  147. tagName;
  148. methods.destroy.call(this);
  149. tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName');
  150. var $panel = tagName === 'UL' ? this : $('<ul' + (o.listStyle ? ' class="' + o.listStyle + '"' : '') + '></ul>').appendTo(this);
  151. // Generate Prev link
  152. if (o.prevText) {
  153. methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage - 1 : o.currentPage + 1, {text: o.prevText, classes: 'prev'});
  154. }
  155. // Generate Next link (if option set for at front)
  156. if (o.nextText && o.nextAtFront) {
  157. methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
  158. }
  159. // Generate start edges
  160. if (!o.invertPageOrder) {
  161. if (interval.start > 0 && o.edges > 0) {
  162. if(o.useStartEdge) {
  163. var end = Math.min(o.edges, interval.start);
  164. for (i = 0; i < end; i++) {
  165. methods._appendItem.call(this, i);
  166. }
  167. }
  168. if (o.edges < interval.start && (interval.start - o.edges != 1)) {
  169. $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
  170. } else if (interval.start - o.edges == 1) {
  171. methods._appendItem.call(this, o.edges);
  172. }
  173. }
  174. } else {
  175. if (interval.end < o.pages && o.edges > 0) {
  176. if(o.useStartEdge) {
  177. var begin = Math.max(o.pages - o.edges, interval.end);
  178. for (i = o.pages - 1; i >= begin; i--) {
  179. methods._appendItem.call(this, i);
  180. }
  181. }
  182. if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
  183. $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
  184. } else if (o.pages - o.edges - interval.end == 1) {
  185. methods._appendItem.call(this, interval.end);
  186. }
  187. }
  188. }
  189. // Generate interval links
  190. if (!o.invertPageOrder) {
  191. for (i = interval.start; i < interval.end; i++) {
  192. methods._appendItem.call(this, i);
  193. }
  194. } else {
  195. for (i = interval.end - 1; i >= interval.start; i--) {
  196. methods._appendItem.call(this, i);
  197. }
  198. }
  199. // Generate end edges
  200. if (!o.invertPageOrder) {
  201. if (interval.end < o.pages && o.edges > 0) {
  202. if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
  203. $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
  204. } else if (o.pages - o.edges - interval.end == 1) {
  205. methods._appendItem.call(this, interval.end);
  206. }
  207. if(o.useEndEdge) {
  208. var begin = Math.max(o.pages - o.edges, interval.end);
  209. for (i = begin; i < o.pages; i++) {
  210. methods._appendItem.call(this, i);
  211. }
  212. }
  213. }
  214. } else {
  215. if (interval.start > 0 && o.edges > 0) {
  216. if (o.edges < interval.start && (interval.start - o.edges != 1)) {
  217. $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
  218. } else if (interval.start - o.edges == 1) {
  219. methods._appendItem.call(this, o.edges);
  220. }
  221. if(o.useEndEdge) {
  222. var end = Math.min(o.edges, interval.start);
  223. for (i = end - 1; i >= 0; i--) {
  224. methods._appendItem.call(this, i);
  225. }
  226. }
  227. }
  228. }
  229. // Generate Next link (unless option is set for at front)
  230. if (o.nextText && !o.nextAtFront) {
  231. methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
  232. }
  233. if (o.ellipsePageSet && !o.disabled) {
  234. methods._ellipseClick.call(this, $panel);
  235. }
  236. },
  237. _getPages: function(o) {
  238. var pages = Math.ceil(o.items / o.itemsOnPage);
  239. return pages || 1;
  240. },
  241. _getInterval: function(o) {
  242. return {
  243. start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),
  244. end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages))
  245. };
  246. },
  247. _appendItem: function(pageIndex, opts) {
  248. var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul');
  249. pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1);
  250. options = {
  251. text: pageIndex + 1,
  252. classes: ''
  253. };
  254. if (o.labelMap.length && o.labelMap[pageIndex]) {
  255. options.text = o.labelMap[pageIndex];
  256. }
  257. options = $.extend(options, opts || {});
  258. if (pageIndex == o.currentPage || o.disabled) {
  259. if (o.disabled || options.classes === 'prev' || options.classes === 'next') {
  260. $linkWrapper.addClass('disabled');
  261. } else {
  262. $linkWrapper.addClass('active');
  263. }
  264. $link = $('<span class="current">' + (options.text) + '</span>');
  265. } else {
  266. if (o.useAnchors) {
  267. $link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
  268. } else {
  269. $link = $('<span >' + (options.text) + '</span>');
  270. }
  271. $link.click(function(event){
  272. return methods._selectPage.call(self, pageIndex, event);
  273. });
  274. }
  275. if (options.classes) {
  276. $link.addClass(options.classes);
  277. }
  278. $linkWrapper.append($link);
  279. if ($ul.length) {
  280. $ul.append($linkWrapper);
  281. } else {
  282. self.append($linkWrapper);
  283. }
  284. },
  285. _selectPage: function(pageIndex, event) {
  286. var o = this.data('pagination');
  287. o.currentPage = pageIndex;
  288. if (o.selectOnClick) {
  289. methods._draw.call(this);
  290. }
  291. return o.onPageClick(pageIndex + 1, event);
  292. },
  293. _ellipseClick: function($panel) {
  294. var self = this,
  295. o = this.data('pagination'),
  296. $ellip = $panel.find('.ellipse');
  297. $ellip.addClass('clickable').parent().removeClass('disabled');
  298. $ellip.click(function(event) {
  299. if (!o.disable) {
  300. var $this = $(this),
  301. val = (parseInt($this.parent().prev().text(), 10) || 0) + 1;
  302. $this
  303. .html('<input type="number" min="1" max="' + o.pages + '" step="1" value="' + val + '">')
  304. .find('input')
  305. .focus()
  306. .click(function(event) {
  307. // prevent input number arrows from bubbling a click event on $ellip
  308. event.stopPropagation();
  309. })
  310. .keyup(function(event) {
  311. var val = $(this).val();
  312. if (event.which === 13 && val !== '') {
  313. // enter to accept
  314. if ((val>0)&&(val<=o.pages))
  315. methods._selectPage.call(self, val - 1);
  316. } else if (event.which === 27) {
  317. // escape to cancel
  318. $ellip.empty().html(o.ellipseText);
  319. }
  320. })
  321. .bind('blur', function(event) {
  322. var val = $(this).val();
  323. if (val !== '') {
  324. methods._selectPage.call(self, val - 1);
  325. }
  326. $ellip.empty().html(o.ellipseText);
  327. return false;
  328. });
  329. }
  330. return false;
  331. });
  332. }
  333. };
  334. $.fn.pagination = function(method) {
  335. // Method calling logic
  336. if (methods[method] && method.charAt(0) != '_') {
  337. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  338. } else if (typeof method === 'object' || !method) {
  339. return methods.init.apply(this, arguments);
  340. } else {
  341. $.error('Method ' + method + ' does not exist on jQuery.pagination');
  342. }
  343. };
  344. })(jQuery);