ajax js分页算法分析

最新推荐文章于 2023-05-15 14:44:55 发布

zhangw428

最新推荐文章于 2023-05-15 14:44:55 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签： ajax 算法

javascript 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了分页导航的设计原则及其实现方法，包括不同情况下的页面展示规则，如页面总数小于等于10时全部显示，超过10时如何进行部分显示等，并针对首页和末页进行了特殊处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示效果：
[页面总数小于等于10，全部显示，当前页特殊显示]
上一页 1 2   3   4   5   6   7   8   9   10   下一页
[页面总数大于10，部分显示，当前页特殊显示]
上一页 1 2   3   …   20   下一页      [当前页面为首页时，上一页不可用]
上一页 1 2   3   4    …   20   下一页
上一页 1 2   3   4   5    …   20   下一页
上一页 1 2   3   4   5   6 …   20   下一页
上一页 1   …    3    4   5    6    7     …  20  下一页
上一页 1   …   14   15 16 17 18    ... 20  下一页
上一页 1   …   15 16 17 18 19 20  下一页
上一页 1   …   16   17 18 19 20  下一页
上一页 1   …   17 18 19 20  下一页
上一页 1   …   18   19 20  下一页[当前页面为末页时，下一页不可用]

算法提取：
0.页码显示规则：
          当前页为首页时不显示上一页；      上一页 1 2   3   …   20   下一页
          当前页为尾页时不显示下一页；      上一页 1   …   17 18 19 20  下一页
1.页面总数(n)<=10 {
          显示全部页码：上一页 1 2   3   4   5   6   7   8   9   10   下一页
    }
2.页面总数(n) > 10 {
2.1     当前页码 <=  4 {
                 左侧显示所有 + 当前页码 + 右侧2个页码 + ... + 尾页
                        上一页 1 2   3   …   20   下一页
                        上一页 1 2   3   4    …   20   下一页
                        上一页 1 2   3   4   5    …   20   下一页
                        上一页 1 2   3   4   5   6 …   20   下一页
          }
2.2      当前页码 > 4 且<= 页面总数(n) - 3 {
                  首页 + ... + 左侧2个页码 + 当前页码 + 右侧2个页码 + ...  +  尾页
                        上一页 1   …    3    4   5    6    7     …  20  下一页
                        上一页 1   …   14   15 16 17 18    ... 20  下一页
          }
2.3      当前页码 > 页面总数(n) - 3 {
                  首页 + ... + 左侧2个页面 + 当前页码 + 右侧显示所有
                        上一页 1   …   15 16 17 18 19 20  下一页
                        上一页 1   …   16   17 18 19 20  下一页
                        上一页 1   …   17 18 19 20  下一页
                        上一页 1   …   18   19 20  下一页
          }
    }