Bootstrap 自定义分页方法

最新推荐文章于 2025-06-29 09:12:35 发布

咩咩文

最新推荐文章于 2025-06-29 09:12:35 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap pagination 分页

本文链接：https://blog.youkuaiyun.com/u011659172/article/details/40376603

bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在网页中实现分页功能，并通过JavaScript动态生成分页条，同时处理用户点击不同页数事件，确保用户体验流畅。

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

1.引入核心js类库

首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及bootstrap的js文件

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

2.视图设置:

<!--显示当前显示的页码--->
<div class="col-sm-6">       
<div class="dataTables_info" id="sample-table-2_info"></div>
</div>
<!-- 分页 -->
<div class="col-sm-6">
<div class="dataTables_paginate paging_bootstrap" id="pager">
													
</div>
</div>

2.分页js:

/**
 * 分页信息
 * @param datas 数据
 */
function createPagerInfo(datas){
	 /**
	  * 绑定当前显示数据
	  */
	if(datas.pageCount!=0){
	$("#sample-table-2_info").html("<font style='font-weight:bold;'>当前第["+datas.pageIndex+"/"+datas.pageCount+"]页 "+"共["+datas.total+"]条数据</font>");
	}else{
	$("#sample-table-2_info").html("<font style='font-weight:bold;'>当前第["+datas.pageCount+"/"+datas.pageCount+"]页 "+"共["+datas.total+"]条数据</font>");

	if(datas.pageCount!=0){
		//动态生成分页条
		$("#pager").html('<ul class="pagination">'+
  				'<li class="next" id="start"><a href="#"  onclick="pageStart('+datas.pageIndex+')">首页</a></li>'+
  				'<li class="next" id="up"><a  href="javascript:void(0)" onclick="pageUp('+datas.pageIndex+')">上一页</a></li>'+
  				'<li class="next" id="down"><a  href="javascript:void(0)" onclick="pageDown('+datas.pageIndex+','+datas.pageCount+')" >下一页</a></li>'+
  				'<li class="next" id="last"><a href="#"  onclick="pageLast('+datas.pageIndex+','+datas.pageCount+')">最后一页</a></li>'+
				'</ul>');
		}else{
			$("#pager").html('<ul class="pagination">'+
	  				'<li class="next" id="start"><a href="#"  onclick="pageStart('+datas.pageIndex+')">首页</a></li>'+
	  				'<li class="next" id="up"><a  href="javascript:void(0)" onclick="pageUp('+datas.pageIndex+')">上一页</a></li>'+
	  				'<li class="next" id="down"><a  href="javascript:void(0)" onclick="pageDown('+datas.pageIndex+','+datas.pageCount+')" >下一页</a></li>'+
	  				'<li class="next" id="last"><a href="#"  onclick="pageLast('+datas.pageCount+','+datas.pageCount+')">最后一页</a></li>'+
					'</ul>');	
		}			
}

4.点击页数事件

/**
 * 首页
 * @param pageStartIndex
 */
function pageStart(pageStartIndex){
	var nowPage = pageStartIndex-1;
	var pageStart = 1;
	if(nowPage==0){
		$.msg("消息提示!","当前已经是首页数据","btn-primary");
	}else{
		gainDetailsInfo(pageStart);
	}
	
}
/**
 * 最后一页
 * @param pageIndex
 * @param pageTotal
 */
function pageLast(pageIndex,pageTotal){
	console.info(pageIndex);
	console.info(pageTotal);
	   var nowPage = pageTotal;
	   if(pageIndex == pageTotal){
		   $.msg("消息提示!","当前已经是最后一页数据","btn-primary");
	   }else{
		   gainDetailsInfo(nowPage);   
	   }
		  

       
	 
	  
}
/**
 * 上一页
 * @param c
 */
function pageUp(c){
	var nowPage = c-1;
	if(nowPage==0||nowPage == -1){
		 $.msg("消息提示!","当前已经是首页数据","btn-primary");
	}else{
		gainDetailsInfo(nowPage);
	}
		
	
}
/**
 * 下一页
 * @param now
 * @param total
 */
function pageDown(now,total){
	var nowPage = now+1;
	if(now==total||total==0){
		$.msg("消息提示!","当前已经是最后一页数据","btn-primary");
		$("#down").attr({"disabled":"disabled"});
	}else{
		gainDetailsInfo(nowPage);	
	}
	
}