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

时间 2019-11-15

原文原文链接

这段时间内因为工做须要，常常须要作到分页的东西，发现公司的分页控件对ajax分页支持不是很好，所以琢磨着本身作一个简单的出来，下面是整个控件的开发思路，与你们分享javascript

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

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

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。java

接下来是控件的函数，按照功能，咱们能够把函数划分以下所示：jquery

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

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

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

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

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

整个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的闭包和原型链这些概念感受比较模糊，还须要更加深刻的学习和了解