jquery.pagination.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /**
  2. * This jQuery plugin displays pagination links inside the selected elements.
  3. *
  4. * @author Gabriel Birke (birke *at* d-scribe *dot* de)
  5. * @version 1.2
  6. * @param {int} maxentries Number of entries to paginate
  7. * @param {Object} opts Several options (see README for documentation)
  8. * @return {Object} jQuery Object
  9. */
  10. jQuery.fn.pagination = function(maxentries, opts) {
  11. opts = jQuery.extend({
  12. items_per_page: 10,
  13. num_display_entries: 10,
  14. current_page: 0,
  15. num_edge_entries: 0,
  16. link_to: "#",
  17. prev_text: "Prev",
  18. next_text: "Next",
  19. ellipse_text: "...",
  20. prev_show_always: true,
  21. next_show_always: true,
  22. callback: function() {
  23. return false;
  24. }
  25. }, opts || {});
  26. return this.each(function() {
  27. /**
  28. * 计算最大分页显示数目
  29. */
  30. function numPages() {
  31. return Math.ceil(maxentries / opts.items_per_page);
  32. }
  33. /**
  34. * 极端分页的起始和结束点,这取决于current_page 和 num_display_entries.
  35. * @返回 {数组(Array)}
  36. */
  37. function getInterval() {
  38. var ne_half = Math.ceil(opts.num_display_entries / 2);
  39. var np = numPages();
  40. var upper_limit = np - opts.num_display_entries;
  41. var start = current_page > ne_half ? Math.max(Math.min(current_page - ne_half, upper_limit), 0) : 0;
  42. var end = current_page > ne_half ? Math.min(current_page + ne_half, np) : Math.min(opts.num_display_entries, np);
  43. return [start, end];
  44. }
  45. /**
  46. * 分页链接事件处理函数
  47. * @参数 {int} page_id ä¸ºæ–°é¡µç 
  48. */
  49. function pageSelected(page_id, evt) {
  50. current_page = page_id;
  51. drawLinks();
  52. var continuePropagation = opts.callback(page_id, panel);
  53. if (!continuePropagation) {
  54. if (evt.stopPropagation) {
  55. evt.stopPropagation();
  56. } else {
  57. evt.cancelBubble = true;
  58. }
  59. }
  60. return continuePropagation;
  61. }
  62. /**
  63. * æ­¤å‡½æ•°å°†åˆ†é¡µé“¾æŽ¥æ’å…¥åˆ°å®¹å™¨å…ƒç´ ä¸­
  64. */
  65. function drawLinks() {
  66. panel.empty();
  67. var interval = getInterval();
  68. var np = numPages();
  69. // 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。
  70. var getClickHandler = function(page_id) {
  71. return function(evt) {
  72. return pageSelected(page_id, evt);
  73. }
  74. }
  75. //辅助函数用来产生一个单链接(如果不是当前页则产生spanæ ‡ç­¾)
  76. var appendItem = function(page_id, appendopts) {
  77. page_id = page_id < 0 ? 0 : (page_id < np ? page_id : np - 1); // 规范page id值
  78. appendopts = jQuery.extend({
  79. text: page_id + 1,
  80. classes: ""
  81. }, appendopts || {});
  82. if (page_id == current_page) {
  83. var lnk = jQuery("<span class='current'>" + (appendopts.text) + "</span>");
  84. } else {
  85. var lnk = jQuery("<a>" + (appendopts.text) + "</a>")
  86. .bind("click", getClickHandler(page_id))
  87. .attr('href', opts.link_to.replace(/__id__/, page_id));
  88. }
  89. if (appendopts.classes) {
  90. lnk.addClass(appendopts.classes);
  91. }
  92. panel.append(lnk);
  93. }
  94. // 产生"Previous"-链接
  95. if (opts.prev_text && (current_page > 0 || opts.prev_show_always)) {
  96. appendItem(current_page - 1, {
  97. text: opts.prev_text,
  98. classes: "prev"
  99. });
  100. }
  101. // 产生起始点
  102. if (interval[0] > 0 && opts.num_edge_entries > 0) {
  103. var end = Math.min(opts.num_edge_entries, interval[0]);
  104. for (var i = 0; i < end; i++) {
  105. appendItem(i);
  106. }
  107. if (opts.num_edge_entries < interval[0] && opts.ellipse_text) {
  108. jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel);
  109. }
  110. }
  111. // 产生内部的些链接
  112. for (var i = interval[0]; i < interval[1]; i++) {
  113. appendItem(i);
  114. }
  115. // 产生结束点
  116. if (interval[1] < np && opts.num_edge_entries > 0) {
  117. if (np - opts.num_edge_entries > interval[1] && opts.ellipse_text) {
  118. jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel);
  119. }
  120. var begin = Math.max(np - opts.num_edge_entries, interval[1]);
  121. for (var i = begin; i < np; i++) {
  122. appendItem(i);
  123. }
  124. }
  125. // 产生 "Next"-链接
  126. if (opts.next_text && (current_page < np - 1 || opts.next_show_always)) {
  127. appendItem(current_page + 1, {
  128. text: opts.next_text,
  129. classes: "next"
  130. });
  131. }
  132. }
  133. //从选项中提取current_page
  134. var current_page = opts.current_page;
  135. //创建一个显示条数和每页显示条数值
  136. maxentries = (!maxentries || maxentries < 0) ? 1 : maxentries;
  137. opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0) ? 1 : opts.items_per_page;
  138. //存储DOMå…ƒç´ ï¼Œä»¥æ–¹ä¾¿ä»Žæ‰€æœ‰çš„å†…éƒ¨ç»“æž„ä¸­èŽ·å–
  139. var panel = jQuery(this);
  140. // èŽ·å¾—é™„åŠ åŠŸèƒ½çš„å…ƒç´
  141. this.selectPage = function(page_id) {
  142. pageSelected(page_id);
  143. }
  144. this.prevPage = function() {
  145. if (current_page > 0) {
  146. pageSelected(current_page - 1);
  147. return true;
  148. } else {
  149. return false;
  150. }
  151. }
  152. this.nextPage = function() {
  153. if (current_page < numPages() - 1) {
  154. pageSelected(current_page + 1);
  155. return true;
  156. } else {
  157. return false;
  158. }
  159. }
  160. // 所有初始化完成,绘制链接
  161. drawLinks();
  162. // 回调函数
  163. opts.callback(current_page, this);
  164. });
  165. }