基于Bootstrap4 + JS编写的分页指示器插件

最新推荐文章于 2025-06-28 12:36:45 发布

原创

最新推荐文章于 2025-06-28 12:36:45 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #bootstrap #javascript #分页

先来看看实现效果

在这里插入图片描述

指示器基于bootstrap4来制作，有关bootstrap的介绍请移步：http://baike.baidu.com/link?url=tRhUz2d7MycGXD_R6s2A8d_WjtC_pUnQyI9Pj3Bp-8pbMqTgKrXF9ZBIU7ejwm8z5P6w_PwsR5Ccm8j1DTqJB7WL2Byhoqe-0jNuCnQVh0K

先让我们来看看bootstrap上关于分页的文档：在这里插入图片描述

// An highlighted block
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

代码中包含3个按钮，状态都是未选中状态，如果需要哪一页的按钮为选中的激活显示状态，则把它的class名称改为“page-item active”，如下图：
在这里插入图片描述

当然，我们编写的时候不可能把所有分页的页码这样静态的写出来，这里官方文档里只是拿3个页码来说明如何使用，外观样式bootstrap为我们提供了，具体的使用逻辑需要我们自己来实现，以下为指示器逻辑的js：

		var totalPagesNum = 35;//总页数
		var currentpage = 1;//初始化当前页面为 1；
		var singlePageNum = 8;//单页上最多显示的页码个数
		//以下两个供下面for循环中判断使用
		var forRangeMin = 1;
		var forRangeMax = singlePageNum;
		
		//页面加载时自动调用此函数
		$(