jquery.pagination.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /**
  2. * pagination.js 1.5.1
  3. * A jQuery plugin to provide simple yet fully customisable pagination.
  4. * @version 1.5.1
  5. * @author mss
  6. * @url https://github.com/Maxiaoxiang/jQuery-plugins
  7. *
  8. * @调用方法
  9. * $(selector).pagination(option, callback);
  10. * -此处callback是初始化调用,option里的callback是点击页码后调用
  11. *
  12. * -- example --
  13. * $(selector).pagination({
  14. * ... // 配置参数
  15. * callback: function(api) {
  16. * console.log('点击页码调用该回调'); //切换页码时执行一次回调
  17. * }
  18. * }, function(){
  19. * console.log('初始化'); //插件初始化时调用该方法,比如请求第一次接口来初始化分页配置
  20. * });
  21. */
  22. ;
  23. (function (factory) {
  24. if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
  25. // AMD或CMD
  26. define(["jquery"], factory);
  27. } else if (typeof module === 'object' && module.exports) {
  28. // Node/CommonJS
  29. module.exports = function (root, jQuery) {
  30. if (jQuery === undefined) {
  31. if (typeof window !== 'undefined') {
  32. jQuery = require('jquery');
  33. } else {
  34. jQuery = require('jquery')(root);
  35. }
  36. }
  37. factory(jQuery);
  38. return jQuery;
  39. };
  40. } else {
  41. //Browser globals
  42. factory(jQuery);
  43. }
  44. }(function ($) {
  45. //配置参数
  46. var defaults = {
  47. totalData: 0, //数据总条数
  48. showData: 0, //每页显示的条数
  49. pageCount: 9, //总页数,默认为9
  50. current: 1, //当前第几页
  51. prevCls: 'prev', //上一页class
  52. nextCls: 'next', //下一页class
  53. prevContent: '<', //上一页内容
  54. nextContent: '>', //下一页内容
  55. activeCls: 'active', //当前页选中状态
  56. coping: false, //首页和尾页
  57. isHide: false, //当前页数为0页或者1页时不显示分页
  58. homePage: '', //首页节点内容
  59. endPage: '', //尾页节点内容
  60. keepShowPN: false, //是否一直显示上一页下一页
  61. mode: 'unfixed', //分页模式,unfixed:不固定页码数量,fixed:固定页码数量
  62. count: 4, //mode为unfixed时显示当前选中页前后页数,mode为fixed显示页码总数
  63. jump: false, //跳转到指定页数
  64. jumpIptCls: 'jump-ipt', //文本框内容
  65. jumpBtnCls: 'jump-btn', //跳转按钮
  66. jumpBtn: '跳转', //跳转按钮文本
  67. callback: function () {} //回调
  68. };
  69. var Pagination = function (element, options) {
  70. //全局变量
  71. var opts = options, //配置
  72. current, //当前页
  73. $document = $(document),
  74. $obj = $(element); //容器
  75. /**
  76. * 设置总页数
  77. * @param {int} page 页码
  78. * @return opts.pageCount 总页数配置
  79. */
  80. this.setPageCount = function (page) {
  81. return opts.pageCount = page;
  82. };
  83. /**
  84. * 获取总页数
  85. * 如果配置了总条数和每页显示条数,将会自动计算总页数并略过总页数配置,反之
  86. * @return {int} 总页数
  87. */
  88. this.getPageCount = function () {
  89. return opts.totalData && opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
  90. };
  91. /**
  92. * 获取当前页
  93. * @return {int} 当前页码
  94. */
  95. this.getCurrent = function () {
  96. return current;
  97. };
  98. /**
  99. * 填充数据
  100. * @param {int} 页码
  101. */
  102. this.filling = function (index) {
  103. var html = '';
  104. current = parseInt(index) || parseInt(opts.current); //当前页码
  105. var pageCount = this.getPageCount(); //获取的总页数
  106. switch (opts.mode) { //配置模式
  107. case 'fixed': //固定按钮模式
  108. html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
  109. if (opts.coping) {
  110. var home = opts.coping && opts.homePage ? opts.homePage : '1';
  111. html += '<a href="javascript:;" data-page="1">' + home + '</a>';
  112. }
  113. var start = current > opts.count - 1 ? current + opts.count - 1 > pageCount ? current - (opts.count - (pageCount - current)) : current - 2 : 1;
  114. var end = current + opts.count - 1 > pageCount ? pageCount : start + opts.count;
  115. for (; start <= end; start++) {
  116. if (start != current) {
  117. html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
  118. } else {
  119. html += '<span class="' + opts.activeCls + '">' + start + '</span>';
  120. }
  121. }
  122. if (opts.coping) {
  123. var _end = opts.coping && opts.endPage ? opts.endPage : pageCount;
  124. html += '<a href="javascript:;" data-page="' + pageCount + '">' + _end + '</a>';
  125. }
  126. html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
  127. break;
  128. case 'unfixed': //不固定按钮模式
  129. if (opts.keepShowPN || current > 1) { //上一页
  130. html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
  131. } else {
  132. if (opts.keepShowPN == false) {
  133. $obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();
  134. }
  135. }
  136. if (current >= opts.count + 2 && current != 1 && pageCount != opts.count) {
  137. var home = opts.coping && opts.homePage ? opts.homePage : '1';
  138. html += opts.coping ? '<a href="javascript:;" data-page="1">' + home + '</a><span>...</span>' : '';
  139. }
  140. var start = (current - opts.count) <= 1 ? 1 : (current - opts.count);
  141. var end = (current + opts.count) >= pageCount ? pageCount : (current + opts.count);
  142. for (; start <= end; start++) {
  143. if (start <= pageCount && start >= 1) {
  144. if (start != current) {
  145. html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
  146. } else {
  147. html += '<span class="' + opts.activeCls + '">' + start + '</span>';
  148. }
  149. }
  150. }
  151. if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
  152. var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
  153. html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="' + pageCount + '">' + end + '</a>' : '';
  154. }
  155. if (opts.keepShowPN || current < pageCount) { //下一页
  156. html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
  157. } else {
  158. if (opts.keepShowPN == false) {
  159. $obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();
  160. }
  161. }
  162. break;
  163. case 'easy': //简单模式
  164. break;
  165. default:
  166. }
  167. html += opts.jump ? '<input type="text" class="' + opts.jumpIptCls + '"><a href="javascript:;" class="' + opts.jumpBtnCls + '">' + opts.jumpBtn + '</a>' : '';
  168. $obj.empty().html(html);
  169. };
  170. //绑定事件
  171. this.eventBind = function () {
  172. var that = this;
  173. var pageCount = that.getPageCount(); //总页数
  174. var index = 1;
  175. $obj.off().on('click', 'a', function () {
  176. if ($(this).hasClass(opts.nextCls)) {
  177. if ($obj.find('.' + opts.activeCls).text() >= pageCount) {
  178. $(this).addClass('disabled');
  179. return false;
  180. } else {
  181. index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;
  182. }
  183. } else if ($(this).hasClass(opts.prevCls)) {
  184. if ($obj.find('.' + opts.activeCls).text() <= 1) {
  185. $(this).addClass('disabled');
  186. return false;
  187. } else {
  188. index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;
  189. }
  190. } else if ($(this).hasClass(opts.jumpBtnCls)) {
  191. if ($obj.find('.' + opts.jumpIptCls).val() !== '') {
  192. index = parseInt($obj.find('.' + opts.jumpIptCls).val());
  193. } else {
  194. return;
  195. }
  196. } else {
  197. index = parseInt($(this).data('page'));
  198. }
  199. that.filling(index);
  200. typeof opts.callback === 'function' && opts.callback(that);
  201. });
  202. //输入跳转的页码
  203. $obj.on('input propertychange', '.' + opts.jumpIptCls, function () {
  204. var $this = $(this);
  205. var val = $this.val();
  206. var reg = /[^\d]/g;
  207. if (reg.test(val)) $this.val(val.replace(reg, ''));
  208. (parseInt(val) > pageCount) && $this.val(pageCount);
  209. if (parseInt(val) === 0) $this.val(1); //最小值为1
  210. });
  211. //回车跳转指定页码
  212. $document.keydown(function (e) {
  213. if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
  214. var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
  215. that.filling(index);
  216. typeof opts.callback === 'function' && opts.callback(that);
  217. }
  218. });
  219. };
  220. //初始化
  221. this.init = function () {
  222. this.filling(opts.current);
  223. this.eventBind();
  224. if (opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') {
  225. $obj.hide();
  226. } else {
  227. $obj.show();
  228. }
  229. };
  230. this.init();
  231. };
  232. $.fn.pagination = function (parameter, callback) {
  233. if (typeof parameter == 'function') { //重载
  234. callback = parameter;
  235. parameter = {};
  236. } else {
  237. parameter = parameter || {};
  238. callback = callback || function () {};
  239. }
  240. var options = $.extend({}, defaults, parameter);
  241. return this.each(function () {
  242. var pagination = new Pagination(this, options);
  243. callback(pagination);
  244. });
  245. };
  246. }));