基于jquery的ajax分页控件的简单实现

最新推荐文章于 2021-02-13 05:44:33 发布

weixin_33810006

最新推荐文章于 2021-02-13 05:44:33 发布

阅读量131

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/u/123965/blog/72244

版权

2019独角兽企业重金招聘Python工程师标准>>>

这段时间内由于工作需要，经常需要做到分页的东西，发现公司的分页控件对ajax分页支持不是很好，因此琢磨着自己做一个简单的出来，下面是整个控件的开发思路，与大家分享

在动手码代码之前，应该规划下代码的结构，应该暴露给调用者怎样的结构，和提供哪些函数。虽然是一个很小的东西，但是良好的结构也是必不可少的。好了，不墨迹了，下面切入正题。

对于一个分页控件来说，首先必须具备的几个必要属性是：

pageSize;     //每页最多显示的记录条数 Number
pageCount;    //符合查询条件的结果的总页数 Number
currentPage;  //当前页码 Number
start;        //分页查询时数据库中的起始位置 Number
end;         //分页查询时数据库中的阶数位置 Number
renderTo;   //渲染该控件的父容器id string
params;     //用户自定义的查询参数，Object
url;        //分页查询的后台URL地址 string
callBackMethod;  //查询结果的回调函数，用于组织和显示结果 Function

上面就是这个控件所应该具有的属性，其中end可以根据start和pageSize加以计算，pageCount也是可以根据后台查询返回的记录个数和pageSize进行计算的，而start默认是0，currentPage默认是1，因此需要调用者配置的项只有pageSize，renderTo，params，url和callBackMethod。

接下来是控件的函数，按照功能，我们可以把函数划分如下所示：

private function
init  //初始化控件配置，创建分页控件dom元素，并渲染在对应的父容器里
bindEvent //绑定创建的dom元素的点击事件响应函数，如上一页，下一页等等
goPage   //根据传入的页码数进行ajax分页查询
updatePageArea //根据外部传入的记录总数和每页显示条目数来计算需要的总页数，并显
               //示在分页区
loadData      //ajax拉取数据

在init方法中，通过jquery创建dom元素，并apped到父元素中，用bindEvent函数给控件各按钮绑定点击事件

init方法和bindEvent方法放在AjaxPager的构造方法中，在创建AjaxPager对象的时候，就进行渲染和事件绑定。

updatePageArea函数主要是根据后台返回的总记录数来计算pageCout和更新控件的显示，如总的页数和记录数

loadData 主要是调用jquery的$.ajax方法来远程请求数据，并在回调函数中调用用户配置的回调函数，来执行用户更新数据的操作。

整个AjaxPager的代码如下所示：

function AjaxPager(options){
	var defaultOptions = {
		renderTo:"",
		params:{},
		url:"",
		currentPage:1,
		pageSize:5,
		start:0,
		end:5,
		pageCount:1,
		callBackMethod:function(){alert('请指定自己的回调方法');}
	}
    this.defaultOptions = defaultOptions;
    //重置配置项
    if(typeof options != "undefined"){
        for(var option in options){
            this.defaultOptions[option] = options[option];
        }
    }

	//利用闭包得到AJaxPager本身的this
	/**/
    var that = this;
    getAjaxPagerThis = function(){
        return that;
    }
    
    this.init();
    this.bindEvent();
    
 
	
}


//初始化page模块函数
AjaxPager.prototype.init = function(){
    //渲染到指定的div中
    if(typeof this.defaultOptions.renderTo != "undefined" && $.trim(this.defaultOptions.renderTo)!=""){
        var $renderDiv = $("#"+$.trim(this.defaultOptions.renderTo));
        $renderDiv.html("");
        $renderDiv.append($("<a href='javascript:void(0)' id='totalCount' style=\"color: #000080; text-decoration:none;\">共0条记录</a><span>&nbsp;&nbsp;</span>"));
        $renderDiv.append($("<a href='javascript:void(0)' id='topPage' style=\"color: #000080; text-decoration:none;\">首页</a><span>&nbsp;&nbsp;</span>"));
        $renderDiv.append($("<a href='javascript:void(0)' id='prevPage' style=\"color: #000080; text-decoration:none;\">上一页</a><span>&nbsp;&nbsp;</span>"));
        $renderDiv.append($("<a href='javascript:void(0)' id='nextPage' style=\"color: #000080; text-decoration:none;\">下一页</a><span>&nbsp;&nbsp;</span>"));
        $renderDiv.append($("<a href='javascript:void(0)' id='endPage' style=\"color: #000080; text-decoration:none;\">末页</a><span>&nbsp;&nbsp;</span>"));
        $renderDiv.append($("<span>跳转到</span>"));
        $renderDiv.append($("<input type=\"text\" size=\"2\" id=\"pageIndex\" />"));
        $renderDiv.append($("<span>页</span><span>&nbsp;&nbsp;</span>"));
        $renderDiv.append($("<span style=\"font-size: 14px\"><span id=\"pageSpan\">(0/0)</span></span><span>&nbsp;&nbsp;</span>"));
        $renderDiv.append($("<input id=\"go\" type=\"button\"  value=\"GO\"  />"));
    }
}

//到第几页
AjaxPager.prototype.goPage = function(pageIndex){
    pageIndex = $.trim(pageIndex);
    if(typeof pageIndex =="undefined" || pageIndex==""||pageIndex==null)
           return;
    if(isNaN(pageIndex) || pageIndex<=0){
       alert('页码不合法');
       return;
    }
    if(pageIndex>=this.defaultOptions.pageCount)
        pageIndex = this.defaultOptions.pageCount;
    if(pageIndex<=1)
        pageIndex = 1;
    this.defaultOptions.start = (pageIndex-1)*this.defaultOptions.pageSize;
    this.defaultOptions.end = pageIndex*this.defaultOptions.pageSize;
    this.defaultOptions.currentPage = pageIndex;
    this.loadData(this);

}

AjaxPager.prototype.topPage = function(){
       getAjaxPagerThis().defaultOptions.currentPage = 1;
       getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);
}


AjaxPager.prototype.endPage = function(){
     getAjaxPagerThis().defaultOptions.currentPage = getAjaxPagerThis().defaultOptions.pageCount;
     getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);
}

AjaxPager.prototype.prevPage = function(){
    if(getAjaxPagerThis().defaultOptions.currentPage<=1)
        getAjaxPagerThis().defaultOptions.currentPage = 1;
    getAjaxPagerThis().defaultOptions.start = (getAjaxPagerThis().defaultOptions.currentPage-2)*getAjaxPagerThis().defaultOptions.pageSize<0?0:(getAjaxPagerThis().defaultOptions.currentPage-2)*getAjaxPagerThis().defaultOptions.pageSize;
    getAjaxPagerThis().defaultOptions.end = (getAjaxPagerThis().defaultOptions.currentPage-1)*getAjaxPagerThis().defaultOptions.pageSize==0?getAjaxPagerThis().defaultOptions.pageSize:(getAjaxPagerThis().defaultOptions.currentPage-1)*getAjaxPagerThis().defaultOptions.pageSize;
    getAjaxPagerThis().defaultOptions.currentPage==1?1:getAjaxPagerThis().defaultOptions.currentPage--;
    getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);
}

AjaxPager.prototype.nextPage = function(){
    if(getAjaxPagerThis().defaultOptions.currentPage>=getAjaxPagerThis().defaultOptions.pageCount)
        getAjaxPagerThis().defaultOptions.currentPage = getAjaxPagerThis().defaultOptions.pageCount-1;
    getAjaxPagerThis().defaultOptions.start = getAjaxPagerThis().defaultOptions.currentPage*getAjaxPagerThis().defaultOptions.pageSize;
    getAjaxPagerThis().defaultOptions.end = (parseInt(getAjaxPagerThis().defaultOptions.currentPage)+parseInt(1))*getAjaxPagerThis().defaultOptions.pageSize;
    getAjaxPagerThis().defaultOptions.currentPage++;
    getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);
}
//数字跳转
AjaxPager.prototype.jumpPage = function(){
    var pageIndex = $.trim($("#pageIndex").val());
    getAjaxPagerThis().goPage(pageIndex);
}
//根据外部传入的记录总数和每页显示条目数来计算需要的总页数，并显示在分页区
AjaxPager.prototype.updatePageArea = function(totalCount){
     if(typeof(totalCount)!='undefined' ){
        if(parseInt(totalCount%this.defaultOptions.pageSize)==0){
            this.defaultOptions.pageCount = parseInt(totalCount/this.defaultOptions.pageSize);
        }else{
            this.defaultOptions.pageCount = parseInt(totalCount/this.defaultOptions.pageSize)+1;
        }
        var tempHtml ="";
        if(this.defaultOptions.pageCount==0){
            tempHtml = "("+0+"/"+this.defaultOptions.pageCount+")";
        }else{
            tempHtml = "("+this.defaultOptions.currentPage+"/"+this.defaultOptions.pageCount+")";
        }
        $("#pageSpan").html(tempHtml);
        $("#pageIndex").val(this.defaultOptions.currentPage);
        if(totalCount==0)
            $("#totalCount").html("共0条记录");
        else
            $("#totalCount").html("共"+totalCount+"条记录");
    }
    else{
        alert('记录总数不存在');
        return ;
    }
    
    
}
//ajax拉取数据函数
AjaxPager.prototype.loadData = function(){
    this.defaultOptions.params.start = this.defaultOptions.start;
    this.defaultOptions.params.end = this.defaultOptions.end;
    $.ajax({
            url:this.defaultOptions.url,
            data:this.defaultOptions.params,
            type:"POST",
            contentType:"application/x-www-form-urlencoded;charset=utf-8",
            dataType:"json",
            async:false,
            //调用失败
            error:function(e){
                   alert("远程请求失败");
            },
            //成功回调函数
            success:function(data){
            	getAjaxPagerThis().defaultOptions.callBackMethod(data);
            }
        });

}

AjaxPager.prototype.bindEvent = function(){
    $("#topPage").bind('click',this.topPage);
    $("#prevPage").bind('click',this.prevPage);
    $("#nextPage").bind('click',this.nextPage);
    $("#endPage").bind('click',this.endPage);
    $("#go").bind('click',this.jumpPage);
}

调用格式为：

<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.5.min.js"  type="text/javascript"></script>
        <script src="ajaxpager.js"  type="text/javascript"></script>
        <script>
            $(function(){

              var pager;
                
              function buildInfo(data){
                    //数组为空，表示没有查询到数据
                    if(data.length==0){
                        var empty_data_info = "<tr><td colspan='5' style='color:red'>查询无数据</td></tr>";
                        $("#clanInfo tbody" ).html(empty_data_info);
                    }
                    else{
                        var tempHtml = ""; 
                        for(var i=0;i<data.listInfo.length;i++){
                            var temp = $("<tr></tr>");
                            temp.append ("<td>"+data.listInfo[i].iClanId+"</td>");
                            temp.append ("<td>"+data.listInfo[i].sClanName+"</td>");
                            temp.append ("<td>"+data.listInfo[i].iArea+"</td>");
                            temp.append ("<td>"+data.listInfo[i].iLeaderUin+"</td>");
                            temp.append ("<td><a href='#' onclick='WozClanManager.ClanInfoManager.resetPwd("+data.listInfo[i].iClanId+");'>重置二级密码</a></td>");
                            tempHtml +="<tr>"+temp.html()+"</tr>";
                        }
                        $("#clanInfo tbody" ).html(tempHtml);
                        pager.updatePageArea(data.totalCount);
                    }
                }
                
                $("#searchBtn").click(function(){
                   pager  = new AjaxPager({
                        renderTo:'ajaxpage',
                        url:"http://gavin.qq.com/admin/admin.php",
                        params:{
                            'action':'queryClanInfo',
                            'sClanName':$("#sClanName").val(),
                            'iClanId':$("#iClanId").val()
                        },
                        callBackMethod:buildInfo
                    });
                    pager.topPage();
                });

            });
           
    </script>

在上面的代码中，pager.updatePageArea(data.totalCount);这个函数本来想放到控件中的loadData函数的回调函数执行的，但是如果这样做，就必须约定后台返回的json数组的格式了，失去了灵活性，所以就暂时提供给调用者自己去更新总的页数，所以这里封装得不是很彻底，希望大家指点下我更好的解决方法。

需要注意的问题：

在整个开发中，我遇到了一个关于函数调用作用域的问题，即"this"的问题，在topPage等方法中，我们直接使用this.defaultOptions已经得不到AjaxPaer的配置项了，这是因为在topPage函数中，this已经变成了绑定该函数的dom元素，如果我们需要在topPage函数中使用AjaxPager的this，那么就需要在AjaxPager的构造方法中定一个全局的函数，来返回AjaxPager的this，即利用闭包来实现。

ps：javascript的闭包和原型链这些概念感觉比较模糊，还需要更加深入的学习和了解

转载于:https://my.oschina.net/u/123965/blog/72244