纯jquery如何实现分页效果

纯jquery如何实现分页效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

为滨海等地区用户提供了全套网页设计制作服务,及滨海网站建设行业解决方案。主营业务为网站设计制作、成都网站建设、滨海网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

我们在前端页面开发过程中,如果一个页面显示的数据过多、页面过长,会让用户的体验感下降。这个时候,我们就需要把数据分成好几页来显示,也就是所谓的分页。

下面我们就通过简单的代码示例,为大家详细介绍用纯jquery实现一个前端超简单的分页效果

css代码:

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
 
ul.pagination li {display: inline;}
 
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid blue;
	border-radius:3px;
}
.active{
	background-color: #7FFFAA;
}

html代码:

最简单的分页

    js脚本文件

    1、引用Jquery和分页脚本

    
    

    2、编写jquery.PageBar.js脚本

    $().ready(function(){
    	
    	var curPage =$("#currentPage").val();
    	var last =$("#totalPage").val();
    	var page =Math.ceil(curPage/10);
    	//调用绘制分页样式函数
    	draw(page,curPage);
    	
    	//绑定点击页码事件
    	$(document).on("click",".pagination li a",function(){
    		var str =$(this).html();
    		if(!isNaN(str)){
    			//移除之前的active
    			$(".pagination li a").removeClass("active");
    			$(this).attr("class","active");
    			$("#currentPage").val(str);
    		}
    	});
    	
    	//绑定下一页点击事件
    	$(document).on("click","#nextPage",function(){
    		var num =$(".active").html();
    		var curPage =$("#currentPage").val();
    		var last =$("#totalPage").val();
    		var page =Math.ceil((parseInt(num))/10);
    		if(num < page*10 && num != last){
    			//移除之前的active
    			$(".pagination li a").removeClass("active");
    			$("#"+(parseInt(num)+1)+"").attr("class","active");
    			//$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持
    			$("#currentPage").val(parseInt(num)+1);
    		}else if(num == page*10 && num != last){
    			//清空之前的数据
    			$(".pagination").html("");
    			draw(page+1,(parseInt(num)+1));
    		}
    	})
    	
    	//绑定上一页点击事件
    	$(document).on("click","#previousPage",function(){
    		var num =$(".active").html();
    		var curPage =$("#currentPage").val();
    		var last =$("#totalPage").val();
    		var page =Math.ceil((parseInt(num))/10);
    		if(num <= page*10 && num != (page-1)*10+1){
    			//移除之前的active
    			$(".pagination li a").removeClass("active");
    			$("#"+(parseInt(num)-1)+"").attr("class","active");
    			//$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持
    			$("#currentPage").val(parseInt(num)-1);
    		}else if(num == (page-1)*10+1 && num != 1){
    			//清空之前的数据
    			$(".pagination").html("");
    			draw(page-1,(parseInt(num)-1));
    		}
    	})
    	
    	//绘制页面分页样式
    	function draw(page,curPage){
    		//页面中的当前页
    		var page =page;
    		//后台传过来的页数
    		var curPage = curPage;
    		//后台传过来的总页数
    		var datas =$("#totalPage").val();
    		//每页显示多少条数据
    		var pageSize =10;
    		//在网页中一共要分多少页
    		var totalPage = Math.floor((datas-1)/pageSize+1);
    		
    		var liStr ="
  • 上一页
  • "; $("#currentPage").val(curPage); if(page <= totalPage){ if(datas <= 10){ for(i=1; i<=datas; i++){ //为当前页增加样式 var active =""; if(i==curPage){ active=" class='active' "; } liStr +="
  • "+i+"
  • " } }else{ var start =pageSize*(page-1)+1; var end =page*pageSize; if(page == totalPage){ for(i=start; i<=datas; i++){ //为当前页增加样式 var active =""; if(i==curPage){ active=" class='active' "; } liStr +="
  • "+i+"
  • " } }else{ for(i=start; i<=end; i++){ //为当前页增加样式 var active =""; if(i==curPage){ active=" class='active' "; } liStr +="
  • "+i+"
  • " } } } } liStr +="
  • 下一页
  • "; $(".pagination").append(liStr); } })

    我们来看看效果图:

    纯jquery如何实现分页效果

    感谢各位的阅读!看完上述内容,你们对纯jquery如何实现分页效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。


    网站标题:纯jquery如何实现分页效果
    文章URL:http://myzitong.com/article/jhpopi.html