封装分页组件--可直接调用

旧城等待， 2022-04-25 00:50 254阅读 0赞

## 封装分页组件–可直接调用 ##

**已经封装好的page.js**

$("#pageIndex").html("<ul class=\"page\"><li id=\"first\">首页</li><li id=\"prve\">上一页</li><li class=\"disabled\"><font id=\"currentPage\"></font>/<font id=\"totalPage\"></font></li><li id=\"next\"></li><li id=\"last\"></li></ul>");
    var currPage = 1;
    
    //每页显示项数绑定改变事件
    $("#pageSize").bind("change",function(){
    	currentPage = 1;
    	$("#doQuery").click();
    })
    
    /********************通用*********************/
    //分页按钮+事件控制
    $.extend({pageIndex:function(nowPage,pageCount,functionName){
    	var func=eval(functionName);
    	if(nowPage == 1){
    		$("#first").addClass("disabled");
    		$("#first").html("首页");
    		$("#prve").addClass("disabled");
    		$("#prve").html("上一页");
    	}else{
    		$("#first").removeClass("disabled");
    		$("#first").html("<a href=\"javascript:;\" title=\"首页\">首页</a>");
    		$("#prve").removeClass("disabled");
    		$("#prve").html("<a href=\"javascript:;\" title=\"上一页\">上一页</a>");
    		$("#first a").bind("click",(function(){
    			currPage = 1;
    			new func();
    		}));
    		$("#prve a").bind("click",(function(){
    			currPage = currPage - 1;
    			new func();
    		}));
    		 
    	}
    	if(nowPage == pageCount){
    		$("#next").addClass("disabled");
    		$("#next").html("下一页");
    		$("#last").addClass("disabled");
    		$("#last").html("末页");
    	}else{
    		$("#next").removeClass("disabled");
    		$("#next").html("<a href=\"javascript:;\" title=\"下一页\">下一页</a>");
    		$("#next a").bind("click",(function(){
    			currPage = currPage + 1;
    			new func();
    		}));
    		if(pageCount < 100){
    			$("#last").removeClass("disabled");
    			$("#last").html("<a href=\"javascript:;\" title=\"末页\">末页</a>");
    			
    			$("#last a").bind("click",(function(){
    				currPage = pageCount;
    				new func();
    			}));
    		}else{
    			$("#last").addClass("hide");
    		}
    		
    	}
      }
    });

**调用方法：**

//在html中先隐藏分页div
    <div class="cl mt-10 hide" id="pageIndex"></div>
    
    
    
    //导入page.js
    <script type="text/javascript" src="static/common/js/page.js"></script>
    
    
    
    //在js的function中进行调用
    var reqParam = {'currentPage':currPage};
    reqParam['everyPage'] = $("#pageSize").val();//每页数量
    
    
    
    //在js中根据返回的结果写入值
    $("#totalCount").html(data.totalCount);
    $("#currentPage").html(data.currentPage);
    $("#totalPage").html(data.totalPage);
    $.pageIndex(data.currentPage,data.totalPage,'createPage');
    $("#pageIndex").removeClass('hide');