jquery.z-pager.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. ;(function($){
  2. var methods = {
  3. pageInit: function(options){
  4. /**
  5. * [opts this plug propertys]
  6. * @type {Obeject}
  7. */
  8. var opts = $.extend({},$.fn.zPager.defaults,options);
  9. return $(this).each(function(k,v){
  10. var _v = $(v);
  11. _v.data("options",opts);
  12. methods.pageData(_v, opts.current);
  13. })
  14. },
  15. pageData: function(_v, _current){
  16. var opts = _v.data("options");
  17. var t = opts.totalData, p = opts.pageData, ajaxOpts = null;
  18. if(opts.ajaxSetData&&(typeof(opts.ajaxSetData)==='boolean')){
  19. if(opts.url!=='' && typeof(opts.url)==='string'){
  20. ajaxOpts = methods.ajaxData(opts.url, _current);
  21. t = opts.totalData = ajaxOpts.total;
  22. if(ajaxOpts.rows.length>0){
  23. var ishasDataRender = (opts.dataRender && typeof(opts.dataRender)==='function');
  24. ishasDataRender ? opts.dataRender(ajaxOpts.rows) : methods.dataRender(_v, ajaxOpts.rows);
  25. }
  26. }else{
  27. $.pageError(2);
  28. }
  29. }
  30. if(t%p === 0){
  31. opts.pageCount = parseInt(t/p);
  32. }else{
  33. opts.pageCount = parseInt(t/p)+1;
  34. }
  35. if(opts.pageCount>0){
  36. _v.data("options",opts);
  37. methods.pageRender(_v, _current);
  38. }
  39. },
  40. dataRender: function(_v, _data){
  41. var opts = _v.data("options");
  42. var cells = '';
  43. for(var i=0;i<_data.length;i++){
  44. cells += '<div class="cc_cells"><a href=""><span>'+_data[i].id+'-'+Math.random()+'</span>';
  45. cells += '<span>'+_data[i].title+'</span>';
  46. cells += '<span>'+_data[i].starttime+'</span>';
  47. cells += '<span>'+_data[i].endtime+'</span>';
  48. cells += '</a></div>';
  49. }
  50. if(opts.htmlBox===''||(typeof(opts.htmlBox)!=='Obeject')){
  51. var abx = _v.prev();
  52. if(!abx.hasClass('pagerHtmlWrap')){
  53. var d = '<div class="pagerHtmlWrap"></div>';
  54. _v.before(d);
  55. }
  56. _v.prev().html(cells);
  57. }else{
  58. opts.htmlBox.html(cells);
  59. }
  60. },
  61. pageRender: function(_v, _current){
  62. // 页码操作
  63. currentPage(_current);
  64. /**
  65. * [o this plug propertys]
  66. * @type {Obeject}
  67. */
  68. var o = _v.data("options");
  69. var _page = o.pageCount;
  70. var _middle = parseInt(o.pageStep/2);
  71. var _tep = _middle-2;
  72. var _html = '';
  73. if(_page>o.pageStep&&_current<=_page){
  74. _html += methods.setPrevNext(o, 'prev');
  75. if(_current<=_middle){
  76. _html += methods.forEach(1, o.pageStep, _current, o.active);
  77. _html += methods.elliPsis();
  78. }else if(_current>_middle&&_current<(_page-_tep)){
  79. _html += methods.pageBtn(1);
  80. _html += methods.elliPsis();
  81. _html += methods.forEach(_current-_tep, _current-(-_tep)-(-1), _current, o.active);
  82. _html += methods.elliPsis();
  83. }else if(_current>=(_page-_tep)){
  84. _html += methods.pageBtn(1);
  85. _html += methods.elliPsis();
  86. _html += methods.forEach(_page-2*_tep-1, _page-(-1), _current, o.active);
  87. }
  88. _html += methods.setPrevNext(o, 'next');
  89. }else if(_page<=o.pageStep){
  90. if(_page>o.minPage){
  91. _html += methods.setPrevNext(o, 'prev');
  92. }
  93. _html += methods.forEach(1, _page-(-1), _current, o.active);
  94. if(_page>o.minPage){
  95. _html += methods.setPrevNext(o, 'next');
  96. }
  97. }
  98. _v.html(_html);
  99. methods.bindEvent(_v);
  100. },
  101. bindEvent: function(_v){
  102. /**
  103. * [o this plug propertys]
  104. * @type {Obeject}
  105. */
  106. var o = _v.data("options");
  107. var _a = _v.find("a");
  108. $.each(_a,function(index,item){
  109. var _this = $(this);
  110. _this.on("click",function(){
  111. if(_this.attr("disabled")){
  112. return false;
  113. }
  114. var _p = _this.attr("page-id");
  115. o.current = _p;
  116. _v.data("options",o);
  117. // methods.options.current = _p;
  118. methods.pageData(_v, _p);
  119. })
  120. })
  121. },
  122. forEach: function(_start,length,_current,curclass){
  123. /**
  124. * [s page elements]
  125. * @type {String}
  126. */
  127. var s = '';
  128. for(var i = _start;i<length;i++){
  129. if(i === parseInt(_current)){
  130. s += methods.pageCurrent(i,curclass);
  131. }else{
  132. s += methods.pageBtn(i);
  133. }
  134. }
  135. return s;
  136. },
  137. pageCurrent: function(_id,_class){
  138. /**
  139. * [class current page element calss]
  140. * @type {String}
  141. */
  142. return '<span class="'+_class+'" page-id="'+_id+'">'+_id+'</span>';
  143. },
  144. elliPsis: function(){
  145. /**
  146. * [class ellipses...]
  147. * @type {String}
  148. */
  149. return '<span class="els">...</span>';
  150. },
  151. pageBtn: function(_id){
  152. /**
  153. * [id page id]
  154. * @type {String}
  155. */
  156. return '<a page-id="'+_id+'">'+_id+'</a>';
  157. },
  158. addBtn: function(_property, _page, _count){
  159. /**
  160. * [disabled is it can click button]
  161. * @type {Boolean}
  162. */
  163. var disabled = '';
  164. if(_count){
  165. disabled = (_page === 0 || _page === _count-(-1)) ? 'disabled="true"':'';
  166. }
  167. return '<a class="'+_property+'" page-id="'+_page+'" '+disabled+'></a>';
  168. },
  169. setPrevNext: function(_o, _type){
  170. /**
  171. * [s string create prev or next buttons elements]
  172. * @type {String}
  173. */
  174. var s = '';
  175. function prev(){
  176. if(_o.btnShow){
  177. s += methods.addBtn(_o.firstBtn, 1);
  178. }
  179. if(_o.btnBool){
  180. s += methods.addBtn(_o.prevBtn, _o.current-1, _o.pageCount);
  181. }
  182. return s;
  183. }
  184. function next(){
  185. if(_o.btnBool){
  186. s += methods.addBtn(_o.nextBtn, _o.current-(-1), _o.pageCount);
  187. }
  188. if(_o.btnShow){
  189. s += methods.addBtn(_o.lastBtn, _o.pageCount);
  190. }
  191. return s;
  192. }
  193. return _type==='prev'? prev(): next();
  194. },
  195. ajaxData: function(_url, _current){
  196. /**
  197. * [ajax get data and pagenumber]
  198. * @param {Object} ){ var parms [ajax url,current page number]
  199. * @return {[type]} [obj total rows]
  200. */
  201. var _total = $.fn.zPager.defaults.totalData;
  202. return (function(){
  203. var parms = {'total':_total,'rows':[]};
  204. $.ajax({
  205. url: _url,
  206. type: 'get',
  207. data: {"page":_current},
  208. dataType: 'json',
  209. cache : false,
  210. async : false,
  211. success: function(data) {
  212. if(data.total && (data.total!==0)){
  213. parms['total'] = data.total;
  214. parms['rows'] = data.rows;
  215. }else{
  216. $.pageError(3);
  217. }
  218. },
  219. error: function(XMLHttpRequest,textStatus,errorThrown) {
  220. var msg = '';
  221. switch(XMLHttpRequest.readyState){
  222. case 0:
  223. msg = '(未初始化)还没有调用send()方法';
  224. break;
  225. case 1:
  226. msg = '(载入)已调用send()方法,正在发送请求';
  227. break;
  228. case 2:
  229. msg = '(载入完成)send()方法执行完成,已经接收到全部响应内容';
  230. break;
  231. case 3:
  232. msg = '(交互)正在解析响应内容';
  233. break;
  234. case 4:
  235. msg = '(完成)响应内容解析完成,可以在客户端调用了';
  236. break;
  237. }
  238. console.log(textStatus+':'+XMLHttpRequest.readyState+'-'+msg);
  239. }
  240. })
  241. return parms;
  242. })();
  243. }
  244. }
  245. $.extend({
  246. pageError:function(type){
  247. /**
  248. * [switch error type]
  249. * @param {[type]} type [no this function]
  250. * @return {[type]} [ajax error]
  251. */
  252. switch(type){
  253. case 1:
  254. console.log('method'+method+'dose not exist on jQuery.zPager');
  255. break;
  256. case 2:
  257. console.log('no ajax');
  258. break;
  259. case 3:
  260. console.log('no data');
  261. break;
  262. default:
  263. console.log('default error');
  264. }
  265. }
  266. })
  267. $.fn.extend({
  268. zPager:function(method){
  269. /**
  270. * [if has this method]
  271. * @param {[type]} methods[method] [apply this method]
  272. * @return {[type]} [return property]
  273. */
  274. if(methods[method]){
  275. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  276. }else if(typeof method === 'object' || !method){
  277. return methods.pageInit.apply(this, arguments);
  278. }else{
  279. $.pageError(1);
  280. }
  281. }
  282. })
  283. $.fn.zPager.defaults = {
  284. totalData: 10, //数据总条数
  285. pageData: 5, //每页数据条数
  286. pageCount: 0, //总页数
  287. current: 1, //当前页码数
  288. pageStep: 8, //当前可见最多页码个数
  289. minPage: 5, //最小页码数,页码小于此数值则不显示上下分页按钮
  290. active: 'current', //当前页码样式
  291. prevBtn: 'pg-prev', //上一页按钮
  292. nextBtn: 'pg-next', //下一页按钮
  293. btnBool: true, //是否显示上一页下一页
  294. firstBtn: 'pg-first', //第一页按钮
  295. lastBtn: 'pg-last', //最后一页按钮
  296. btnShow: true, //是否显示第一页和最后一页按钮
  297. disabled: true, //按钮失效样式
  298. ajaxSetData: true, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空
  299. url: '', //ajax路由
  300. htmlBox: '' //ajax数据写入容器
  301. }
  302. })(jQuery)