翻页效果

  • 当点击第1页到第7页的点击时,只在total页前加… ,如下图:

image.png

  • 当点击第8页到第total-1页的任意页时,只在第1页后及total页前加… ,如下图:

image.png

  • 当点击最后一页时,只在第1页后加… ,如下图:

image.png

逻辑思路

1.当点击的页数小于或等于7时,让10页以内的都显示出来(i<10),其它用...表示,最后加上total页。
2.当点击的页数大于7时,第1页(i == 1)和最后一页显示(i == total),当前页相邻的前5页(paging - 5)和后5页(paging + 5)都显示,其它用…显示

注意:代码中的加号,是为了把字符串转换成数字再计算。image.png

代码实现

  1. //参照博客园的翻页来实现 paging当前页,total总页数,html要插入的标签
  2. function pagingConstruct(paging,total,html){
  3. var pagingDivInnerHTML = "";
  4. var isHiddenExist = 0;//这里是加载省略号的flag
  5. console.log("当前页: "+paging)
  6. console.log("总页: "+total)
  7. //从第1页读到total页。
  8. for (var i = 1; i <= total; i++) {
  9. if (i == paging) {//如果读到当前页加一个active
  10. pagingDivInnerHTML += "<a class='page_a active' href='javascript:void(0)' >" + i + "</a> ";
  11. }else {
  12. //如果当前页小于7
  13. if(paging <= 7){
  14. if(i <10){
  15. pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + i + "</a> ";
  16. isHiddenExist = 0;
  17. }else{
  18. if(isHiddenExist == 0) {
  19. pagingDivInnerHTML += "...";
  20. pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + total + "</a> ";
  21. isHiddenExist = 1;
  22. }
  23. }
  24. }else{
  25. if(i== 1){
  26. pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >1</a> ";
  27. }
  28. if(i == total){
  29. pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + total + "</a> ";
  30. }
  31. if(i <= (+paging + 5) && i >= (+paging - 5)){
  32. pagingDivInnerHTML += "<a class='page_a' href='javascript:void(0)' >" + i + "</a> ";
  33. isHiddenExist = 0;
  34. }else{
  35. if(isHiddenExist == 0) {
  36. pagingDivInnerHTML += "...";
  37. isHiddenExist = 1;
  38. }
  39. }
  40. }
  41. }
  42. }
  43. //把构造的内容放上去pagingDiv
  44. $("#"+html+"").html(pagingDivInnerHTML);
  45. }