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

最新推荐文章于 2022-08-03 19:49:58 发布

王彬_Ivan

最新推荐文章于 2022-08-03 19:49:58 发布

阅读量1.8k

点赞数

文章标签：前端 bootstrap javascript 分页

本文链接：https://blog.csdn.net/hbswb/article/details/84312364

版权

先来看看实现效果

在这里插入图片描述

指示器基于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;
		
		//页面加载时自动调用此函数
		$().ready( function() {
		   	PageTurning();//页面初始化时，调用分页初始化函数
		});
		//分页组件头部固定结构
		function PageHeader() {
			var html = [];
			html += '<nav aria-label="Page navigation example">';
			html += '<ul class="pagination pagination-lg justify-content-center">';
			return html;
		}
		//分页组件尾部固定结构
		function PageFooter() {
			var html = [];
			html += '</ul></nav>';
			return html;
		}
		//上一页按钮
		function PreviousButton(isShow) {
			if (isShow == 'true') {
				var html = [];
				html += '<li class="page-item"><a class="page-link" tabindex="-1" onClick="PageTurning(\'Previous\')">上一页</a></li>';
				return html;
			}
			return "";
		}
		//下一页按钮
		function NextButton(isShow) {
			if (isShow == 'true') {
				var html = [];
				html += '<li class="page-item"><a class="page-link" tabindex="-1" onClick="PageTurning(\'Next\')">下一页</a></li>';
				return html;
			}
			return "";
		}
		//分页组件首页按钮的固定结构
		function FirstPageButton(isShow) {
			if (isShow == 'true') {
				var html = [];
				html += '<li class="page-item"><a class="page-link" tabindex="-1" onClick="GoToFisrtPage()">首页</a></li>';
				return html;
			}
			return "";
		}
		//分页组件末页按钮的固定结构
		function LastPageButton(isShow) {
			if (isShow == 'true') {
				var html = [];
				html += '<li class="page-item"><a class="page-link" tabindex="-1" onClick="GoToLastPage()">末页</a></li>';
				return html;
			}
			return "";
		}
		
		function GoToFisrtPage(){
			currentpage = 1;//把当前页设置为1
			forRangeMin = 1;
			forRangeMax = singlePageNum;
			PageTurning();
		}
		
		function GoToLastPage(){
			currentpage = totalPagesNum;//把当前页设置为总页数（即最后一页）
			var nnn = Math.floor(totalPagesNum/singlePageNum);
			console.log('nnn:'+nnn);//向上取整
			//forRangeMin += singlePageNum*nnn;
			//forRangeMax += singlePageNum*(nnn-1);
			forRangeMin = 0;
			forRangeMax = 0;
			forRangeMin = 1 + singlePageNum*nnn;
			forRangeMax = singlePageNum + singlePageNum*nnn;
			PageTurning();
		}
		

		//翻页处理函数
		function PageTurning(type){
			if(type == 'Next'){
				if(currentpage < totalPagesNum)
					currentpage++;
				if(currentpage !== 1){
					if( (currentpage - 1) % singlePageNum == 0){
						console.log("0!!");
							forRangeMin = forRangeMin + singlePageNum;
							forRangeMax = forRangeMax + singlePageNum;
					}
				}
			}
			if(type == 'Previous'){
				if(currentpage > 1)
					currentpage--;
				if(currentpage !== 1){
					if( (currentpage) % singlePageNum == 0){
						console.log("0!!");
							forRangeMin = forRangeMin - singlePageNum;
							forRangeMax = forRangeMax - singlePageNum;
					}
				}
			}
			var html = [];
			console.log('currentpage='+currentpage);

			for (var i = 1; i <= totalPagesNum; i++) {
				console.log(forRangeMin+',,,'+forRangeMax);
				if(i>=forRangeMin && i<=forRangeMax){
					if (i == currentpage) {//激活状态
						html += '<li class="page-item active" onclick="GoToPages('+i+')"><a class="page-link" tabindex="-1">'
								+ i + '</a></li>';
					} else {//非激活状态
						html += '<li class="page-item" onclick="GoToPages('+i+')"><a class="page-link" tabindex="-1">'
								+ i + '</a></li>';
					}
				}
			}
			if(currentpage == 1){
				$('#Pagination').html(
						PageHeader() + FirstPageButton('false') +PreviousButton('false') + html
								+ NextButton('true') + LastPageButton('true') +PageFooter());
			}else if(currentpage == totalPagesNum){
				$('#Pagination').html(
				PageHeader() + FirstPageButton('true') + PreviousButton('true') + html
				+ NextButton('false') + LastPageButton('false') + PageFooter());
			}else{
				$('#Pagination').html(
						PageHeader() + FirstPageButton('true') + PreviousButton('true') + html
						+ NextButton('true') + LastPageButton('true') + PageFooter());
			}
		}
		function GoToPages(pagenum){
			alert('模拟：跳转到第 ' + pagenum + ' 页');
		}

指示器有首页，上一页，每页的N个页码，下一页，末页这几个按钮，当前页码为第一页的时候，不显示首页按钮和上一页按钮，当页码为最后一页时，不显示下一页和末页按钮，基于这样的逻辑，把bootstrap分页插件的各个部分的标签抽离为一个函数去return，用到的时候，去调用这个函数，用+号进行拼接，如：

//分页组件头部固定结构
		function PageHeader() {
			var html = [];
			html += '<nav aria-label="Page navigation example">';
			html += '<ul class="pagination pagination-lg justify-content-center">';
			return html;
		}
		//分页组件尾部固定结构
		function PageFooter() {
			var html = [];
			html += '</ul></nav>';
			return html;
		}
		//上一页按钮
		function PreviousButton(isShow) {
			if (isShow == 'true') {
				var html = [];
				html += '<li class="page-item"><a class="page-link" tabindex="-1" onClick="PageTurning(\'Previous\')">上一页</a></li>';
				return html;
			}
			return "";
		}
		//下一页按钮
		function NextButton(isShow) {
			if (isShow == 'true') {
				var html = [];
				html += '<li class="page-item"><a class="page-link" tabindex="-1" onClick="PageTurning(\'Next\')">下一页</a></li>';
				return html;
			}
			return "";
		}

$('#Pagination').html(
						PageHeader() + FirstPageButton('false') +PreviousButton('false') + html
								+ NextButton('true') + LastPageButton('true') +PageFooter());

关于翻页逻辑部分，每页显示的页码数目可以由var singlePageNum = 8 来指定，具体逻辑的思路为：因为我们所有的页码，都是通过for循环来显示的，每次调用PageTurning()函数时，都会完整的跑完一遍for循环，假如我们有20页页码，但是我们想每页只显示8页的页码，如何限定不让其显示后12页？我的思路是定义两个变量：

		var forRangeMin = 1;//
		var forRangeMax = singlePageNum;

通过上面两个变量来限定每次for循环时，显示哪些页码的内容：

			for (var i = 1; i <= totalPagesNum; i++) {
				console.log(forRangeMin+',,,'+forRangeMax);
				if(i>=forRangeMin && i<=forRangeMax){//如果循环到的页码满足这两个变量的限定值
					if (i == currentpage) {//激活状态
						html += '<li class="page-item active"><a class="page-link" tabindex="-1">'
								+ i + '</a></li>';
					} else {//非激活状态
						html += '<li class="page-item"><a class="page-link" tabindex="-1">'
								+ i + '</a></li>';
					}
				}
			}

每次点击上一页和下一页按钮的时候，对forRangeMin 和forRangeMax两个变量进行相应的加减操作，以供下面for循环的使用，每次加减的值为singlePageNum变量指定的每页显示页码的数量：

			if(type == 'Next'){
				if(currentpage < totalPagesNum)
					currentpage++;
				if(currentpage !== 1){
					if( (currentpage - 1) % singlePageNum == 0){
						console.log("0!!");
							forRangeMin = forRangeMin + singlePageNum;
							forRangeMax = forRangeMax + singlePageNum;
					}
				}
			}
			if(type == 'Previous'){
				if(currentpage > 1)
					currentpage--;
				if(currentpage !== 1){
					if( (currentpage) % singlePageNum == 0){
						console.log("0!!");
							forRangeMin = forRangeMin - singlePageNum;
							forRangeMax = forRangeMax - singlePageNum;
					}
				}
			}

最后附代码文件的下载地址：链接：https://pan.baidu.com/s/1sPeVLRNQh-EAtyaAuwwOIg
提取码：212s
本来想在CSDN上直接上传资源，但是要求最低下载分为1分，没有0分。

王彬_Ivan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
基于Bootstrap4 + JS编写的分页指示器插件

先来看看实现效果指示器基于bootstrap4来制作，有关bootstrap的介绍请移步：http://baike.baidu.com/link?url=tRhUz2d7MycGXD_R6s2A8d_WjtC_pUnQyI9Pj3Bp-8pbMqTgKrXF9ZBIU7ejwm8z5P6w_PwsR5Ccm8j1DTqJB7WL2Byhoqe-0jNuCnQVh0K先让我们来看看bootst...
复制链接

扫一扫