现象:当点击倒数第二页时,最后一页显示重复,如下图:
image.png

上一篇的逻辑还有问题,现优化如下:

翻页效果

参照上一篇文章或博客园的翻页

逻辑思路

假设:total =100
1.当点击的页数小于或等于7时,让10页以内的都显示出来(i<10),其它用...表示,最后加上total页。
2.当点击的页数大于7时,有两种情况:

  • 一是当前页大于7页并当前页小于总页数total减掉7页,实际就是7页~93页之间的处理。第1页(i == 1)和最后一页显示(i == total),当前页相邻的前5页(paging - 5)和后5页(paging + 5)都显示,其它用…显示
  • 二是当前页大于7页并当前页大于总页数total减掉7页,实际就是94页~100页之间的处理。第1页(i == 1)和当前页相邻的前5页(paging - 5)和当前页到最后一页都显示,其它用…显示

代码

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