jquery.pagination.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. /****************************************************************
  2. * *
  3. * 代码库 *
  4. * www.dmaku.com *
  5. * 努力创建完善、持续更新插件以及模板 *
  6. * *
  7. ****************************************************************/
  8. /**
  9. * This jQuery plugin displays pagination links inside the selected elements.
  10. *
  11. * This plugin needs at least jQuery 1.4.2
  12. *
  13. * @author Gabriel Birke (birke *at* d-scribe *dot* de)
  14. * @version 2.2
  15. * @param {int} maxentries Number of entries to paginate
  16. * @param {Object} opts Several options (see README for documentation)
  17. * @return {Object} jQuery Object
  18. */
  19. (function($){
  20. /**
  21. * @class Class for calculating pagination values
  22. */
  23. $.PaginationCalculator = function(maxentries, opts) {
  24. this.maxentries = maxentries;
  25. this.opts = opts;
  26. }
  27. $.extend($.PaginationCalculator.prototype, {
  28. /**
  29. * Calculate the maximum number of pages
  30. * @method
  31. * @returns {Number}
  32. */
  33. numPages:function() {
  34. return Math.ceil(this.maxentries/this.opts.items_per_page);
  35. },
  36. /**
  37. * Calculate start and end point of pagination links depending on
  38. * current_page and num_display_entries.
  39. * @returns {Array}
  40. */
  41. getInterval:function(current_page) {
  42. var ne_half = Math.floor(this.opts.num_display_entries/2);
  43. var np = this.numPages();
  44. var upper_limit = np - this.opts.num_display_entries;
  45. var start = current_page > ne_half ? Math.max( Math.min(current_page - ne_half, upper_limit), 0 ) : 0;
  46. var end = current_page > ne_half?Math.min(current_page+ne_half + (this.opts.num_display_entries % 2), np):Math.min(this.opts.num_display_entries, np);
  47. if(np==1){
  48. //alert("只有一页,不显示前一页后一页");
  49. this.opts.prev_show_always=false;
  50. this.opts.next_show_always=false;
  51. }
  52. return {start:start, end:end};
  53. }
  54. });
  55. // Initialize jQuery object container for pagination renderers
  56. $.PaginationRenderers = {}
  57. /**
  58. * @class Default renderer for rendering pagination links
  59. */
  60. $.PaginationRenderers.defaultRenderer = function(maxentries, opts) {
  61. this.maxentries = maxentries;
  62. this.opts = opts;
  63. this.pc = new $.PaginationCalculator(maxentries, opts);
  64. }
  65. $.extend($.PaginationRenderers.defaultRenderer.prototype, {
  66. /**
  67. * Helper function for generating a single link (or a span tag if it's the current page)
  68. * @param {Number} page_id The page id for the new item
  69. * @param {Number} current_page
  70. * @param {Object} appendopts Options for the new item: text and classes
  71. * @returns {jQuery} jQuery object containing the link
  72. */
  73. createLink:function(page_id, current_page, appendopts){
  74. var lnk, np = this.pc.numPages();
  75. page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
  76. appendopts = $.extend({text:page_id+1, classes:""}, appendopts||{});
  77. if(page_id == current_page){
  78. lnk = $("<span class='current'>" + appendopts.text + "</span>");
  79. }
  80. else
  81. {
  82. lnk = $("<a>" + appendopts.text + "</a>")
  83. .attr('href', this.opts.link_to.replace(/__id__/,page_id));
  84. }
  85. if(appendopts.classes){ lnk.addClass(appendopts.classes); }
  86. lnk.data('page_id', page_id);
  87. return lnk;
  88. },
  89. // Generate a range of numeric links
  90. appendRange:function(container, current_page, start, end, opts) {
  91. var i;
  92. for(i=start; i<end; i++) {
  93. this.createLink(i, current_page, opts).appendTo(container);
  94. }
  95. },
  96. getLinks:function(current_page, eventHandler,psize) {
  97. var $page = this;
  98. var begin, end,
  99. interval = this.pc.getInterval(current_page),
  100. np = this.pc.numPages(),
  101. fragment = $("<div class='pagination'></div>");
  102. if(isNotEmpty(psize))np = Math.ceil(this.maxentries / psize);
  103. // Generate "Previous"-Link
  104. if(this.opts.prev_text && (current_page > 0 || this.opts.prev_show_always)){
  105. fragment.append(this.createLink(current_page-1, current_page, {text:this.opts.prev_text, classes:"prev"}));
  106. }
  107. // Generate starting points
  108. if (interval.start > 0 && this.opts.num_edge_entries > 0)
  109. {
  110. end = Math.min(this.opts.num_edge_entries, interval.start);
  111. this.appendRange(fragment, current_page, 0, end, {classes:'sp'});
  112. if(this.opts.num_edge_entries < interval.start && this.opts.ellipse_text)
  113. {
  114. jQuery("<span>"+this.opts.ellipse_text+"</span>").appendTo(fragment);
  115. }
  116. }
  117. // Generate interval links
  118. this.appendRange(fragment, current_page, interval.start, interval.end);
  119. // Generate ending points
  120. if (interval.end < np && this.opts.num_edge_entries > 0)
  121. {
  122. if(np-this.opts.num_edge_entries > interval.end && this.opts.ellipse_text)
  123. {
  124. jQuery("<span>"+this.opts.ellipse_text+"</span>").appendTo(fragment);
  125. }
  126. begin = Math.max(np-this.opts.num_edge_entries, interval.end);
  127. this.appendRange(fragment, current_page, begin, np, {classes:'ep'});
  128. }
  129. // Generate "Next"-Link
  130. if(this.opts.next_text && (current_page < np-1 || this.opts.next_show_always)){
  131. fragment.append(this.createLink(current_page+1, current_page, {text:this.opts.next_text, classes:"next"}));
  132. }
  133. $('a', fragment).click(eventHandler);
  134. var psize = (current_page+1);
  135. var proxySzie = (psize>=this.maxentries) ? this.maxentries : psize;
  136. if(this.opts.showSelect)fragment.append("<select class='tm_psize_go'><option value='10'>10</option><option value='12'>12</option><option value='15'>15</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option><option value='50'>50</option></select>&nbsp;");
  137. if(this.opts.showGo)fragment.append("<a href='javascript:void(0);' style='float:left;'>共<label class='tmui_page_itemcount'>"+this.maxentries+"</label>条</a>&nbsp;<a href='javascript:void(0);' title='请输入其他页码' style='' class='tm_go'>GO</a><input type='text' title='请输入其他页码' class='tm_number' value='"+proxySzie+"' id='tm_pagego'/>");
  138. return fragment;
  139. }
  140. });
  141. // Extend jQuery
  142. $.fn.pagination = function(maxentries, opts){
  143. // Initialize options with default values
  144. opts = jQuery.extend({
  145. items_per_page:5,
  146. num_display_entries:11,
  147. current_page:0,
  148. num_edge_entries:0,
  149. link_to:"javascript:void(0)",
  150. prev_text:"前一页",
  151. next_text:"后一页",
  152. ellipse_text:"...",
  153. prev_show_always:true,
  154. next_show_always:true,
  155. renderer:"defaultRenderer",
  156. load_first_page:false,
  157. showGo : true,
  158. showSelect:true,
  159. callback:function(){return false;},
  160. goback :function(){
  161. }
  162. },opts||{});
  163. var containers = this,
  164. renderer, links, current_page;
  165. /**
  166. * This is the event handling function for the pagination links.
  167. * @param {int} page_id The new page number
  168. */
  169. function paginationClickHandler(evt){
  170. var links,
  171. new_current_page = $(evt.target).data('page_id'),
  172. continuePropagation = selectPage(new_current_page);
  173. if (!continuePropagation) {
  174. evt.stopPropagation();
  175. }
  176. return continuePropagation;
  177. }
  178. /**
  179. * This is a utility function for the internal event handlers.
  180. * It sets the new current page on the pagination container objects,
  181. * generates a new HTMl fragment for the pagination links and calls
  182. * the callback function.
  183. */
  184. function selectPage(new_current_page) {
  185. // update the link display of a all containers
  186. containers.data('current_page', new_current_page);
  187. links = renderer.getLinks(new_current_page, paginationClickHandler);
  188. containers.empty();
  189. links.appendTo(containers);
  190. $(".tm_number").attr("title", " 请输入数字...").on("keydown",
  191. function(e) {
  192. return tm_numberKey($(this), e);
  193. });
  194. // call the callback and propagate the event if it does not return false
  195. var continuePropagation = opts.callback(new_current_page,opts.items_per_page,containers);
  196. init();
  197. return continuePropagation;
  198. }
  199. function selectPage_psize(new_current_page,psize) {
  200. // update the link display of a all containers
  201. containers.data('current_page', new_current_page);
  202. links = renderer.getLinks(new_current_page, paginationClickHandler,psize);
  203. containers.empty();
  204. links.appendTo(containers);
  205. containers.find(".tm_psize_go").find("option[value='"+psize+"']").attr("selected",true);
  206. $(".tm_number").attr("title", " 请输入数字...").on("keydown",
  207. function(e) {
  208. return tm_numberKey($(this), e);
  209. });
  210. // call the callback and propagate the event if it does not return false
  211. var continuePropagation = opts.callback(new_current_page,psize, containers);
  212. init();
  213. return continuePropagation;
  214. }
  215. // -----------------------------------
  216. // Initialize containers
  217. // -----------------------------------
  218. current_page = opts.current_page;
  219. containers.data('current_page', current_page);
  220. // Create a sane value for maxentries and items_per_page
  221. maxentries = (!maxentries || maxentries < 0)?1:maxentries;
  222. opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
  223. if(!$.PaginationRenderers[opts.renderer])
  224. {
  225. throw new ReferenceError("Pagination renderer '" + opts.renderer + "' was not found in jQuery.PaginationRenderers object.");
  226. }
  227. renderer = new $.PaginationRenderers[opts.renderer](maxentries, opts);
  228. // Attach control events to the DOM elements
  229. var pc = new $.PaginationCalculator(maxentries, opts);
  230. var np = pc.numPages();
  231. if(np==0 || np==1){
  232. containers.hide();
  233. }else{
  234. containers.show();
  235. }
  236. containers.bind('setPage', {numPages:np}, function(evt, page_id) {
  237. if(page_id >= 0 && page_id < evt.data.numPages) {
  238. selectPage(page_id); return false;
  239. }
  240. });
  241. containers.bind('prevPage', function(evt){
  242. var current_page = $(this).data('current_page');
  243. if (current_page > 0) {
  244. selectPage(current_page - 1);
  245. }
  246. return false;
  247. });
  248. containers.bind('nextPage', {numPages:np}, function(evt){
  249. var current_page = $(this).data('current_page');
  250. if(current_page < evt.data.numPages - 1) {
  251. selectPage(current_page + 1);
  252. }
  253. return false;
  254. });
  255. // When all initialisation is done, draw the links
  256. links = renderer.getLinks(current_page, paginationClickHandler);
  257. containers.empty();
  258. links.appendTo(containers);
  259. // call callback function
  260. if(opts.load_first_page) {
  261. opts.callback(current_page, containers);
  262. }
  263. init();
  264. function init(){
  265. containers.find(".tm_psize_go").find("option[value='"+opts.items_per_page+"']").attr("selected",true);
  266. $('.tm_go', containers).on("click",function(e){
  267. var goPage = $("#tm_pagego").val();
  268. var current_page = containers.data('current_page');
  269. if(isNotEmpty(goPage) && !isNaN(goPage)){
  270. //if(goPage>np)return;
  271. var pno = goPage - 1;
  272. if(pno == current_page)return;
  273. if(goPage==0){
  274. $("#tm_pagego").val(1);
  275. pno = 0;
  276. }
  277. if(goPage>np){
  278. $("#tm_pagego").val(np-1);
  279. pno = np-1;
  280. }
  281. selectPage(pno);
  282. }else{
  283. $("#tm_pagego").focus();
  284. }
  285. stopBubble(e);
  286. });
  287. $('.tm_psize_go', containers).on("change",function(e){
  288. var pageSize = $(this).val();
  289. opts.items_per_page = pageSize;
  290. selectPage_psize(0,pageSize);
  291. });
  292. $(".tm_number").attr("title", " 请输入数字...").on("keydown",
  293. function(e) {
  294. return tm_numberKey($(this), e);
  295. });
  296. }
  297. } // End of $.fn.pagination block
  298. })(jQuery);