jQuery编写分页插件，页面引入即可调用

最新推荐文章于 2022-07-09 02:29:47 发布

紫枫叶520

最新推荐文章于 2022-07-09 02:29:47 发布

阅读量480

点赞数

分类专栏： javascript和jQuery 文章标签： javascript jquery 分页插件

本文链接：https://blog.csdn.net/zifengye520/article/details/76541506

版权

javascript和jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

之前写过分页插件，后来用到项目里去了，测试的时候有不少bug，优化后的代码，记录下来，以后备用

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PageBar</title>
<script src="jquery.min.js"></script>
<script src="pageBar.js"></script>  
<link rel="stylesheet" type="text/css" href="pageBar.css"/> 
  
<script>  
	var total=200;
	var pageSize=10;
	$(function(){  
		draw();  
	});  

	function draw(param){  
		var param={currPage:1,pageSize:pageSize,total:total};
		$("#pageBar").pageBar(param);  
	}  
	  
	function doSearch(currPage,pageSize,total){
		var param={currPage:currPage,pageSize:pageSize,total:total};
		$("#pageBar").pageBar(param);
	} 
</script>  
  
 </head>  
 <body>  
    
    <div id="pageBar" style="margin-top:100px;">  
          
    </div>  

 </body>  
</html>

js插件

;(function($){  
    $.fn.extend({  
        pageBar:function(param){ 
				
            //清空分页内容  
            $(this).empty();  
              
            //重新绘制插件  
            var maxPageCount=10;//最多显示是个页码按钮，超出部分中间用...显示  
  
            options=$.extend({currPage:1},param); 
		
            pageCount=Math.ceil(options.total/options.pageSize)==0 ? 1 : Math.ceil(options.total/options.pageSize);//total为0的时候，总页数为1  
  
			//“首页”，“上一页”按钮
            if(options.currPage>1){  
                $(this).append($("<span>").addClass("bar").text("首页").on("click",function(){
                    //查询第一页
					doSearch(1,pageSize,options.total);
                }));  
                $(this).append($("<span>").addClass("bar bar1").text("上一页").on("click",function(){ 
                    //查询上一页
                   doSearch(parseInt(options.currPage)-1,pageSize,options.total); 
                }));  
            }  
  
			//“数字”按钮
            if(pageCount<=maxPageCount){//按钮数未超标  
                for(var i=1;i<pageCount+1;i++){  
                    $(this).getBarByCurrPage(i,options.currPage,options.total);  
                }  
            }else{//超出最大按钮数  
                if(options.currPage<9){//当前页在前面8个之中  
                    for(var i=1;i<9;i++){  
                        $(this).getBarByCurrPage(i,options.currPage,options.total);  
                    }  
                    $(this).append("...");  
                    $(this).getBarByCurrPage(pageCount,options.currPage,options.total);  
                }else if(options.currPage>pageCount-8){//当前页在最后8个之中  
                    $(this).getBarByCurrPage(1,options.currPage,options.total);  
                    $(this).append("...");  
                    for(var i=pageCount-7;i<=pageCount;i++){  
                        $(this).getBarByCurrPage(i,options.currPage,options.total);  
                    }  
                }else{//显示首页和尾页，中间显示包含当前页在内的7个，前后用...代替  
                    $(this).getBarByCurrPage(1,options.currPage,options.total);  
                    $(this).append("...");  
                    for(var i=options.currPage-3;i<=parseInt(options.currPage)+3;i++){  
                        $(this).getBarByCurrPage(i,options.currPage,options.total);  
                    }  
                    $(this).append("...");  
                    $(this).getBarByCurrPage(pageCount,options.currPage,options.total);  
                }  
            }  
			
			//“尾页”，“下一页”按钮
            if(options.currPage<pageCount){  
                $(this).append($("<span>").addClass("bar bar1").text("下一页").on("click",function(){  
                    //查询下一页
					doSearch(parseInt(options.currPage)+1,pageSize,options.total); 
                }));  
                $(this).append($("<span>").addClass("bar").text("尾页").on("click",function(){  
                    //查询最后一页
                   doSearch(pageCount,pageSize,options.total);  
                }));  
            } 
        },  
        /*   
            绘制一个页码按钮，供上面的方法使用 
            i 当前按钮显示的页数，currPage当前页 
        */  
        getBarByCurrPage:function(i,currPage,total){  
            if(i==currPage){  
                $(this).append($("<span style='cursor:not-allowed'>").addClass("bar bar2").text(i));  
            }else{  
                $(this).append($("<span>").text(i).addClass("bar").on("click",function(){  
                    var currPage=parseInt($(this).text());  
                    //查询  
                    doSearch(currPage,pageSize,total); 
                }));  
            }  
        }  
    });  
})(jQuery);

使用事项：

1.初始化分页按钮，$("#pageBar").pageBar(param);其中param是一个json对象，包含了分页所需的参数，param={currPage:1,pageSize:pageSize,total:total}。

2.页面需要自己添加doSearch(currPage,pageSize,total)方法，参数为：当前页，每页多少条，总数，这是在点击分页按钮的时候触发的事件。