网站
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.
 
 
 

229 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. console.log(pageData)
  53. if (pageData.pageTotal < pageData.pageSize) {
  54. btnSum = 1;
  55. } else if (pageData.pageTotal % pageData.pageSize === 0) {
  56. btnSum = pageData.pageTotal / pageData.pageSize;
  57. } else {
  58. btnSum = parseInt(pageData.pageTotal / pageData.pageSize) + 1;
  59. }
  60. // 设置当前页
  61. var Current=pageData.pageCurrent; //当前页
  62. if(Current<=0){
  63. Current=1;
  64. }else if(Current>btnSum){
  65. Current=btnSum;
  66. }
  67. // 生成分页按钮函数
  68. function createBtnItem(pageCurrent){
  69. var _len;
  70. if (pageData.maxBtnNum >= btnSum) {
  71. // 最大按钮数刚好等于 有多少页时 无需隐藏其他按钮
  72. _len=btnSum;
  73. } else {
  74. // 最大按钮数大于 有多少页时 需要隐藏其他按钮
  75. _len=pageData.maxBtnNum;
  76. }
  77. // 设置分页显示段
  78. var minPageNum,maxPageNum;
  79. minPageNum=pageCurrent-parseInt(_len/2);
  80. maxPageNum=pageCurrent+parseInt(_len/2);
  81. if(_len%2===0){
  82. maxPageNum--
  83. }
  84. if(minPageNum<1){
  85. maxPageNum+= 1-minPageNum;
  86. minPageNum=1;
  87. }
  88. if(maxPageNum>btnSum){
  89. minPageNum-=maxPageNum-btnSum;
  90. maxPageNum=btnSum;
  91. }
  92. var html_S='',content_html='';
  93. // 生成按钮
  94. for(var i=minPageNum;i<maxPageNum+1;i++){
  95. if(i==pageCurrent){
  96. html_S='<span class="page_common_btn_style page_common_btn_active" data-pageIndex="'+i+'" onclick="turnThePage('+i+')">'+i+'</span>';
  97. }else{
  98. html_S='<a class="page_common_btn_style" data-pageIndex="'+i+'" onclick="turnThePage('+i+')">'+i+'</a>';
  99. }
  100. if(i==minPageNum&&minPageNum!=1){
  101. html_S='<span class="page_common_btn_style">···</span>'
  102. }
  103. if(i==maxPageNum&&maxPageNum!=btnSum){
  104. html_S='<span class="page_common_btn_style">···</span>'
  105. }
  106. content_html+=html_S;
  107. }
  108. $(dom.el+' .page_btn_box').html(content_html)
  109. }
  110. createBtnItem(Current);
  111. //
  112. setUpbtnState(dom.el,Current)
  113. // 分页切换按钮事件
  114. $(dom.el+' .page_btn_box').on('click','a.page_common_btn_style',function(){
  115. Current=parseInt($(this).attr('data-pageIndex'));
  116. createBtnItem(Current);
  117. //
  118. setUpbtnState(dom.el,Current)
  119. })
  120. // 上一页事件
  121. $(dom.el).on('click','a.prev_btn',function(){
  122. if(Current<=1){
  123. return;
  124. }
  125. Current-=1;
  126. createBtnItem(Current);
  127. //
  128. setUpbtnState(dom.el,Current)
  129. turnThePage(Current)
  130. })
  131. // 回到首页事件
  132. $(dom.el).on('click','a.prev_top_btn',function(){
  133. if(Current<=1){
  134. return;
  135. }
  136. Current=1;
  137. createBtnItem(Current);
  138. //
  139. setUpbtnState(dom.el,Current)
  140. turnThePage(Current)
  141. })
  142. // 下一页事件
  143. $(dom.el).on('click','a.next_btn',function(){
  144. console.log(Current)
  145. console.log(btnSum)
  146. if(Current>=btnSum){
  147. return;
  148. }
  149. Current+=1;
  150. createBtnItem(Current);
  151. //
  152. setUpbtnState(dom.el,Current)
  153. turnThePage(Current)
  154. })
  155. // 跳至尾页事件
  156. // 回到首页事件
  157. $(dom.el).on('click','a.next_bottom_btn',function(){
  158. if(Current>=btnSum){
  159. return;
  160. }
  161. Current=btnSum;
  162. createBtnItem(Current);
  163. //
  164. setUpbtnState(dom.el,Current)
  165. turnThePage(Current)
  166. })
  167. // 处理公共上一步下一步状态
  168. function setUpbtnState(dom_s,num){
  169. var css_s={
  170. 'color':'#b2b2b2',
  171. 'opacity':'0.6',
  172. }
  173. var none_css={
  174. 'color':'#606266',
  175. 'opacity':'1',
  176. }
  177. if(num<=1){
  178. setCssStyle(1,css_s)
  179. setCssStyle(2,none_css)
  180. }else if(num>=btnSum){
  181. setCssStyle(2,css_s)
  182. setCssStyle(1,none_css)
  183. }else{
  184. setCssStyle(1,none_css)
  185. setCssStyle(2,none_css)
  186. }
  187. //
  188. function setCssStyle(type,_cssObject){
  189. if(type==1){
  190. // 上
  191. $(dom_s+' .prev_top_btn').css(_cssObject)
  192. $(dom_s+' .prev_btn').css(_cssObject)
  193. }else{
  194. // 下
  195. $(dom_s+' .next_btn').css(_cssObject)
  196. $(dom_s+' .next_bottom_btn').css(_cssObject)
  197. }
  198. }
  199. }
  200. }