基於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的閉包和原型鏈這些概念感受比較模糊，還須要更加深刻的學習和了解