网站
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

226 lines
6.2 KiB

  1. // 初始化分页
  2. function createPage(el) {
  3. var element = $(el)
  4. // 创建回到顶部
  5. element.append('<a class="prev_top_btn page_common_btn_style"></a>')
  6. // 添加图标
  7. $(el + ' .prev_top_btn').append('<span class="iconfont icon-most-left"></span>')
  8. // 创建上一步按钮
  9. element.append('<a class="prev_btn page_common_btn_style"></a>')
  10. // 添加图标
  11. $(el + ' .prev_btn').append('<span class="iconfont icon-zuo"></span>')
  12. // 创建页码按钮框
  13. element.append('<div class="page_btn_box"></div>')
  14. // 创建下一步按钮
  15. element.append('<a class="next_btn page_common_btn_style"></a>')
  16. // 添加图标
  17. $(el + ' .next_btn').append('<span class="iconfont icon-you"></span>')
  18. // 创建跳到最后一页按钮
  19. element.append('<a class="next_bottom_btn page_common_btn_style"></a>')
  20. // 添加图标
  21. $(el + ' .next_bottom_btn').append('<span class="iconfont icon-most-right"></span>')
  22. // 返回 el
  23. return {
  24. el: el, //选择器
  25. html: $(el).html(), //htnl 内容
  26. }
  27. }
  28. // 设置分页
  29. function setPage(dom, pageData) {
  30. var pageData=pageData;
  31. if(pageData==undefined){
  32. pageData={};
  33. }
  34. // el = dom 选择器 例如:'.class' / '#id'
  35. // pageData = 分页配置
  36. if(pageData.maxBtnNum<5||pageData.maxBtnNum==undefined){
  37. pageData.maxBtnNum=5;
  38. }
  39. if(pageData.pageCurrent==undefined){
  40. pageData.pageCurrent=1;
  41. }
  42. if(pageData.pageSize==undefined){
  43. pageData.pageSize=10;
  44. }
  45. if(pageData.pageTotal==undefined){
  46. pageData.pageTotal=0;
  47. }
  48. // 初始化设置分页 (防止多次使用配置函数出现错误)
  49. $(dom.el).html(dom.html)
  50. // 获取需要多少个按钮
  51. var btnSum; // sum
  52. if (pageData.pageTotal < pageData.pageSize) {
  53. btnSum = 1;
  54. } else if (pageData.pageTotal % pageData.pageSize === 0) {
  55. btnSum = pageData.pageTotal / pageData.pageSize;
  56. } else {
  57. btnSum = parseInt(pageData.pageTotal / pageData.pageSize) + 1;
  58. }
  59. // 设置当前页
  60. var Current=pageData.pageCurrent; //当前页
  61. if(Current<=0){
  62. Current=1;
  63. }else if(Current>btnSum){
  64. Current=btnSum;
  65. }
  66. // 生成分页按钮函数
  67. function createBtnItem(pageCurrent){
  68. var _len;
  69. if (pageData.maxBtnNum >= btnSum) {
  70. // 最大按钮数刚好等于 有多少页时 无需隐藏其他按钮
  71. _len=btnSum;
  72. } else {
  73. // 最大按钮数大于 有多少页时 需要隐藏其他按钮
  74. _len=pageData.maxBtnNum;
  75. }
  76. // 设置分页显示段
  77. var minPageNum,maxPageNum;
  78. minPageNum=pageCurrent-parseInt(_len/2);
  79. maxPageNum=pageCurrent+parseInt(_len/2);
  80. if(_len%2===0){
  81. maxPageNum--
  82. }
  83. if(minPageNum<1){
  84. maxPageNum+= 1-minPageNum;
  85. minPageNum=1;
  86. }
  87. if(maxPageNum>btnSum){
  88. minPageNum-=maxPageNum-btnSum;
  89. maxPageNum=btnSum;
  90. }
  91. var html_S='',content_html='';
  92. // 生成按钮
  93. for(var i=minPageNum;i<maxPageNum+1;i++){
  94. if(i==pageCurrent){
  95. html_S='<span class="page_common_btn_style page_common_btn_active" data-pageIndex="'+i+'" onclick="turnThePage('+i+')">'+i+'</span>';
  96. }else{
  97. html_S='<a class="page_common_btn_style" data-pageIndex="'+i+'" onclick="turnThePage('+i+')">'+i+'</a>';
  98. }
  99. if(i==minPageNum&&minPageNum!=1){
  100. html_S='<span class="page_common_btn_style">···</span>'
  101. }
  102. if(i==maxPageNum&&maxPageNum!=btnSum){
  103. html_S='<span class="page_common_btn_style">···</span>'
  104. }
  105. content_html+=html_S;
  106. }
  107. $(dom.el+' .page_btn_box').html(content_html)
  108. }
  109. createBtnItem(Current);
  110. //
  111. setUpbtnState(dom.el,Current)
  112. // 分页切换按钮事件
  113. $(dom.el+' .page_btn_box').on('click','a.page_common_btn_style',function(){
  114. Current=parseInt($(this).attr('data-pageIndex'));
  115. createBtnItem(Current);
  116. //
  117. setUpbtnState(dom.el,Current)
  118. })
  119. // 上一页事件
  120. $(dom.el).on('click','a.prev_btn',function(){
  121. if(Current<=1){
  122. return;
  123. }
  124. Current-=1;
  125. createBtnItem(Current);
  126. //
  127. setUpbtnState(dom.el,Current)
  128. turnThePage(Current)
  129. })
  130. // 回到首页事件
  131. $(dom.el).on('click','a.prev_top_btn',function(){
  132. if(Current<=1){
  133. return;
  134. }
  135. Current=1;
  136. createBtnItem(Current);
  137. //
  138. setUpbtnState(dom.el,Current)
  139. turnThePage(Current)
  140. })
  141. // 下一页事件
  142. $(dom.el).on('click','a.next_btn',function(){
  143. console.log(Current)
  144. console.log(btnSum)
  145. if(Current>=btnSum){
  146. return;
  147. }
  148. Current+=1;
  149. createBtnItem(Current);
  150. setUpbtnState(dom.el,Current)
  151. turnThePage(Current)
  152. })
  153. // 跳至尾页事件
  154. // 回到首页事件
  155. $(dom.el).on('click','a.next_bottom_btn',function(){
  156. if(Current>=btnSum){
  157. return;
  158. }
  159. Current=btnSum;
  160. createBtnItem(Current);
  161. //
  162. setUpbtnState(dom.el,Current)
  163. turnThePage(Current)
  164. })
  165. // 处理公共上一步下一步状态
  166. function setUpbtnState(dom_s,num){
  167. var css_s={
  168. 'color':'#b2b2b2',
  169. 'opacity':'0.6',
  170. }
  171. var none_css={
  172. 'color':'#606266',
  173. 'opacity':'1',
  174. }
  175. if(num<=1){
  176. setCssStyle(1,css_s)
  177. setCssStyle(2,none_css)
  178. }else if(num>=btnSum){
  179. setCssStyle(2,css_s)
  180. setCssStyle(1,none_css)
  181. }else{
  182. setCssStyle(1,none_css)
  183. setCssStyle(2,none_css)
  184. }
  185. //
  186. function setCssStyle(type,_cssObject){
  187. if(type==1){
  188. // 上
  189. $(dom_s+' .prev_top_btn').css(_cssObject)
  190. $(dom_s+' .prev_btn').css(_cssObject)
  191. }else{
  192. // 下
  193. $(dom_s+' .next_btn').css(_cssObject)
  194. $(dom_s+' .next_bottom_btn').css(_cssObject)
  195. }
  196. }
  197. }
  198. }