怎樣自己實現一個web前端分頁

                                 分頁

/=======================分頁樣式==================================/

                      /*分頁樣式*/  

                     .page{  

                     display:inline-block;  
                     width:100%;  
                   text-align:center;  
                    height:35px;  
                line-height:35px;  
               background-color:none;  
         }  
             .page  .pagination{  
            margin:0px  !important;  
  }  
       .page  .pagination  li  a{  
       /*修改按鈕樣式*/  
        border:none  !important;  
        background-color:transparent;  !important;  
        color:#555;  
        cursor:pointer;  
  }  
     .page  .pagination  li  a:hover,.page  .pagination  li  a:focus,.page  .pagination  li                         a:active{  
      background-color:#ccc;  
     }  
      .page  .pagination  li.active  a,.page  .pagination  li.active  a:hover,.page  .pagination                    li  a:active,.page  .pagination  li  a:focus{  
       color:#0099ff;  
        cursor:default;  
     background-color:none;  
   }  
    .pageinfo{
      display:none  !important;
  }
    /*隱藏分頁信息*/  
    .clickmore{  cursor:pointer;  }  
     .pagination>.action>a:hover,.pagination>.action>a:focus{  color:#0099ff  !important;  cursor:default;  }

/*======================分頁樣式結束============================/ 上面寫的分頁樣式，可自行修改，下面是分頁組件代碼：

    /**  
   * bootstrap 對應的獨立分析組件  
* @demo 
* pagination.init({  
*   selector : '.page', //選擇器，作為渲染目標,默認為 '.page.pagination',非必須  
*   count : 120, //為總記錄數，必須  
*   isTransform : false,//是否轉換為符合后臺需要的參數begin /end  
*   page : 1, //為當前頁碼，非必須  
*   pagesize : 10, //為每頁條數，默認10，非必須  
*   increment : 10, //為頁面存在的分頁增量，比如只顯示5個頁碼，非必須  
*   pageArray : [], //可以進行生成下拉框，比如 10，20，50 ，選擇不同的頁碼進行分頁，非必須  
*   previousTitle : '點擊查看',//為上一頁的title顯示，未實現；  
*   callback : function(pageObject){//為分頁點擊回調函數，必須  
*     console.log(pageObject);//pageObject= {page : 1,pagesize:10};回調函數返回值，包括下一個頁碼和每頁條數  
*   }  
* });  
* @since 2016年2月15日 15:18:36  
* @author lixun  
* @version 1.0  
* @edited by lixun ,增加多實例；一個頁面多個分頁 ；  
* 處理思路：  
* 1\. 對應的每個selector有一個pagination,然后在調用的時候根據selector進行查找  
* 2\. 處理的內容：1）分頁加載；2）事件綁定 3）回調函數 
* 3\. 處理原則：平滑處理，原有的可繼續使用；  
*/ 
var pagination = {
_defaultSelector : '.page .pagination',    //默認選擇器
_defaultPagesize : 20,                    //默認分頁條數
_defaultIncrement : 10,                    //默認分的頁碼數
_defaultPageArray : [10,20,50,100],        //默認的條碼下拉框
_map : {    //用戶處理多實例增加的容器，不可覆蓋
    //selector : {私有屬性}
    //".page .column" : {}
},
//通用屬性
lastSelector : '',//上一個選擇器，用于開發者不傳遞參數的時候，去查找上一個選擇器用的。
previousTitle : '上一頁',
nextTitle : '下一頁',
previousContent : '上一頁',
nextContent : '下一頁',
//獲得分頁實例
_getPagination : function(selector){
    if(null != selector && selector != '' && $(selector).length > 0){
        return pagination._map[selector];
    }else{
        console.error('selector 傳參錯誤或$('+selector+')不存在!');
    }
    return null;
},
//獲得返回的字符串
pageArrayStr : function(selector,ps){
    var pa = pagination._map[selector].pageArray;
    if(null != pa && pa.length > 0){
        var concatStr = '<select onchange="pagination.changePagesize(\''+(selector)+'\',event)" style="height:20px;line-height:20px;padding:0px;margin-top:-2px;">';
        var i=0,max=pa.length;
        for(;i<max;i++){
            var v = pa[i];
            concatStr += '<option value="'+v+'" '+(v == ps ? 'selected="true"' : '')+'>'+v+'</option>';
        }
        concatStr += '</select>';
        return concatStr;
    }
    return "";
},

//綁定事件
bindEvent : function(selector){
    if(selector && selector != ''){
        var _tempPaginationInstance = pagination._map[selector] || {};
        var _bindE = _tempPaginationInstance.bindE == true ? true : false;
        if(_bindE == false){
            _tempPaginationInstance.bindE = true;
            pagination._map[selector] = _tempPaginationInstance;
            //跳轉頁面
            $(selector).delegate('li.unselect','click',pagination.clickpage);
            //綁定上一頁事件
            $(selector).delegate('li.pageup','click',pagination.pageup);
            //綁定下一頁事件
            $(selector).delegate('li.pagedown','click',pagination.pagedown);
            //綁定前面頁面事件
            $(selector).delegate('a.previous','click',pagination.previouspage);
            //綁定后面頁面事件
            $(selector).delegate('a.next','click',pagination.nextpage);
        }
    }
},
//分頁初始化
init : function(params){
    //處理傳參數據
    params = params || {};
    params.count = params.count || 0;
    params.pagesize = params.pagesize || pagination._defaultPagesize;
    var paramSelector = pagination._defaultSelector;
    if(params.selector){
        paramSelector = params.selector;
    }
    //獲得選擇器后，進行實例處理
    var paginationInstance = pagination._getPagination(paramSelector);
    //傳參獲取最新配置
    var tempPaginationInstance = {
        selector : paramSelector,
        page : params.page ? params.page : (paginationInstance && paginationInstance.action == true ? (paginationInstance.page ? paginationInstance.page : 1) : 1),
        count : params.count || 0,
        action : false,
        bindE : false,//是否綁定事件
        pagesize : params.pagesize,
        callback : params.callback || $.noop,
        pagenumber : (parseInt((params.count || 0)/(params.pagesize||pagination._defaultPagesize),10)+((params.count||0)%(params.pagesize||pagination._defaultPagesize)==0 ? 0 : 1)),//根據總數和一頁條數獲得頁碼數量
        increment :  params.increment || pagination._defaultIncrement,
        pageArray : params.pageArray || pagination._defaultPageArray
    };
    if(paginationInstance && undefined != paginationInstance){
        //存在實例,進行更新。
        tempPaginationInstance.bindE = true;//如果存在的話，肯定綁定了
        pagination._map[paramSelector] = $.extend(paginationInstance,tempPaginationInstance);
    }else{
        pagination._map[paramSelector] = tempPaginationInstance;//重新賦值
        pagination.bindEvent(paramSelector);//綁定事件
    }
    pagination.loadPage(paramSelector);
    pagination.lastSelector = paramSelector;
},
//點擊頁面數直接跳轉
clickpage : function(){
    var $a = $(this).find('a');
    var selector = $a.attr('selector');
    var gonumber = parseInt($a.html(),10);
    $(selector+' li.active').addClass('unselect').removeClass('active');
    $(this).addClass('active').removeClass('unselect');
    pagination.gopage(selector,gonumber);
},
//向上翻頁
pageup :  function(){
    var $a = $(this).find('a');
    var selector = $a.attr('selector');
    var _tempInstance = pagination._map[selector];
    if(_tempInstance){
        //得到當前頁面，然后翻頁，如果在邊界，那么就要進行觸發一次翻頁事件
        var  $actel = $(selector+' li.active a');
        var nownumber = parseInt($actel.html(),10);
        if(nownumber == 1){
            return false;
        }else{
            pagination.gopage(selector,nownumber-1);
        }
    }
},
//向下翻頁
pagedown : function(){
    var $a = $(this).find('a');
    var selector = $a.attr('selector');
    var _tempInstance = pagination._map[selector];
    if(_tempInstance){
        var pagenumber = _tempInstance.pagenumber;
        //獲得該實例的分頁碼數
        var  $actel = $(selector+' li.active a');
        var nownumber = parseInt($actel.html(),10);
        if(nownumber == pagenumber){
            return false;
        }else{
            pagination.gopage(selector,nownumber+1);
        }
    }
},
//前面頁面
previouspage : function(){
    var selector = $(this).attr('selector');
    var _tempInstance =pagination._map[selector];
    if(_tempInstance){
        var increment = _tempInstance.increment,
        page = _tempInstance.page;
        //判斷當前是第幾個，比如16，那么就以10的倍數向前翻頁
        var $nowobj = $(selector+' a.previous').parent();
        var nextnumber = parseInt($nowobj.next().children().html(),10);
        var end = (nextnumber-1)%increment > 0 ? parseInt((nextnumber/increment),10)*increment : parseInt((nextnumber/increment-1),10)*increment;
        pagination.gopage(selector, end+1);
    }
},
//后面頁面
nextpage : function(){
    //判斷當前點擊的哪些，比如：現在是5，點擊生成6...
    var selector = $(this).attr('selector');
    var _tempInstance = pagination._map[selector];
    if(_tempInstance){
        var increment = _tempInstance.increment;
        var $nowobj = $(selector+' a.next').parent();
        var prenumber = parseInt($nowobj.prev().children().html(),10);
        if(parseInt(prenumber/5,10) ==1){//說明在第一頁，要從5加載5個，直到結束
            pagination.addPage(selector,$nowobj,5);
        }else{
            //第二次 增加頁面數量了，應該是從10開始了...
            pagination.addPage(selector,$nowobj,increment);
        }
    }
},
addPage : function(selector,domobj,size){
    var _tempInstance = pagination._map[selector];
    if(_tempInstance){
        var pagenumber = _tempInstance.pagenumber,
        increment  = _tempInstance.increment;
        var start  = parseInt(domobj.prev().children().html(),10);
        pagination.gopage(selector, start+1);
    }
},
loadPage : function(selector){
    //根據selector獲得count,pagesize,page
    var _tempInstance = pagination._map[selector];
    if(!_tempInstance){
        console.log('error : _tempInstance is null now ,check pagination params please!');
        return null;
    }
    var count = _tempInstance.count,
        pagesize = _tempInstance.pagesize,
        page = _tempInstance.page,
        increment = _tempInstance.increment,
        pageArrayStr = pagination.pageArrayStr(selector,pagesize),
        pagenumber = _tempInstance.pagenumber;
    var $page = $(selector);
    //清空內容
    $page.html('');
    var pageno = pagenumber;
    page = page > pageno ? 1 : page;    //如果當前頁碼樹大于總頁碼數則置為1，否則為當前頁碼數；

    //如果頁數超過10，則增...,以5個數字遞增，
    //顯示到page頁面的下一個5的倍數上。
    var endpage = (parseInt(page/increment,10))*increment > pageno ? pageno : (parseInt(page/increment,10)+(page%increment==0 ? 0 : 1))*increment;
    if(pageno<=increment){
        endpage = pageno;
    }
    var pageHtml = '';
    if(pageArrayStr== ''){
    }else if(pagination._map[selector].pageArray.length==1){
        pageHtml = '<li class="pageinfo">共'+count+'條 </li>';
    }else{
        pageHtml = '<li class="pageinfo">共'+count+'條 , 每頁'+pageArrayStr+'條</li>';
    }
    $page.append(pageHtml);
    $page.append('<li class="prev pageup '+(page ==1 ? 'disabled' : '')+'"><a title="'+pagination.previousTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.previousContent+'</a></li>');
    //判斷第幾頁
    var start = 0;
    if(page > increment && page <= pageno){
        $page.append('<li><a class="previous" href="javascript：;" selector="'+(selector)+'">...</a></li>');
        //給一個自定義增長數量，比如5個，每次增長五個，當前頁面6頁面，增長5個為10個，start page為 6
        start = parseInt((page%increment==0 ? (page-1) : page)/increment,10)*increment;
        endpage = (start+increment ) > pageno ? pageno : (start+increment);//如果開始頁面加上增加頁面大于最大頁碼數，則等于最大頁碼數
        if(endpage-page <increment){
            start = endpage-increment;
        }
    }
    for(var i=start;i<(endpage == 0?1:endpage);i++){
        var listr = '<li class="unselect"><a href="javascript：;" selector="'+(selector)+'">'+(i+1)+'</a></li>';
        //在第page頁面增加樣式
        if((page-1) == i){
            listr = '<li class="active"><a selector="'+(selector)+'">'+(i+1)+'</a></li>';
        }
        $page.append(listr);
    }
    if(pageno > 5 && endpage != pageno){
        $page.append('<li><a class="next" href="javascript：;" selector="'+(selector)+'">...</a></li>');
    }
    $page.append('<li class="next pagedown '+(page == pageno ? 'disabled' : '')+'"><a title="'+pagination.nextTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.nextContent+'</a></li>');
},
//跳轉頁面
gopage : function(selector,page){
    var _tempInstance = pagination._map[selector];
    if(_tempInstance){
        _tempInstance.page = page;
        _tempInstance.action = true;
        _callback = _tempInstance.callback;
        _pagesize = _tempInstance.pagesize;
        pagination._map[selector] = _tempInstance;
        _callback(pagination.transform({
            page : page,
            rows : _pagesize
        }));
    }
},
/*返回現在的頁面*/
getNowPage : function(selector){
    selector = selector || (pagination.lastSelector || pagination._defaultSelector);//獲取上一個選擇器
    var _tempInstance = pagination._map[selector];
    if(_tempInstance){
        _tempInstance.action = true;
        var _page = _tempInstance.page,
            _pagesize = _tempInstance.pagesize;
        pagination._map[selector] = _tempInstance;
        return pagination.transform({
            page : _page,
            rows : _pagesize
        });
    }
    return null;
},
transform : function(paginationParams){
    if(pagination.isTransform && pagination.isTransform == true){
        var p = paginationParams.page || 1;
        var rows = paginationParams.pagesize || 10;
        return {
            begin : (p-1)*rows+1,
            end : p*rows
        };
    }
    return paginationParams;
},
//返回分頁參數，以供列表頁面加載數據使用
getParams :function(selector){
    selector = selector || (pagination.lastSelector || pagination._defaultSelector);//獲取上一個選擇器
    var _tempInstance = pagination._map[selector];
    if(_tempInstance){
        var _pagesize = _tempInstance.pagesize;
        return pagination.transform({
            //第幾頁，一頁有多少條記錄
            page:1,
            rows : _pagesize
        });
    }
    return null;
},
changePagesize : function(selector,ev){
    var t = ev.currentTarget || ev.target || ev.srcElement,
        $t = $(t),
        v=$t.find('option:selected').val();
  //            selector = $t.attr('selector');
    var _tempInstance = pagination._map[selector];
    if(_tempInstance){
        _tempInstance.pagesize = v;
        var _callback = _tempInstance.callback;
        pagination._map[selector] = _tempInstance;
        //重新調用callback方法
        _callback(pagination.transform({
            page : 1,
            rows : v
        }));
    }
}
};

僅供借鑒....

項目開發過程中，分頁是少不了的，之前封裝了一個分頁組件，樣式是基于bootstrap的樣式，當然也可以自己來修改；

別的不說，上圖上代碼；

bootstrap樣式分頁

以下是相關代碼：

/***=======================分頁樣式==================================***/  
/*分頁樣式*/  
.page{  
  display:inline-block;  
  width:100%;  
  text-align:center;  
  height:35px;  
  line-height:35px;  
  background-color:none;  
}  
.page  .pagination{  
  margin:0px  !important;  
}  
.page  .pagination  li  a{  
  /*修改按鈕樣式*/  
  border:none  !important;  
  background-color:transparent;  !important;  
  color:#555;  
  cursor:pointer;  
}  
.page  .pagination  li  a:hover,.page  .pagination  li  a:focus,.page  .pagination  li  a:active{  
  background-color:#ccc;  
}  
.page  .pagination  li.active  a,.page  .pagination  li.active  a:hover,.page  .pagination  li  a:active,.page  .pagination  li  a:focus{  
  color:#0099ff;  
  cursor:default;  
  background-color:none;  
}  
.pageinfo{
  display:none  !important;
}
/*隱藏分頁信息*/  
.clickmore{  cursor:pointer;  }  
.pagination>.action>a:hover,.pagination>.action>a:focus{  color:#0099ff  !important;  cursor:default;  } 
 /****======================分頁樣式結束============================***/

上面是自己寫的分頁樣式，可自行修改之，下面是分頁組件代碼：

/**  
   * bootstrap 對應的獨立分析組件  
    * @demo 
    * pagination.init({  
    *   selector : '.page', //選擇器，作為渲染目標,默認為 '.page.pagination',非必須  
    *   count : 120, //為總記錄數，必須  
    *   isTransform : false,//是否轉換為符合后臺需要的參數begin /end  
    *   page : 1, //為當前頁碼，非必須  
    *   pagesize : 10, //為每頁條數，默認10，非必須  
    *   increment : 10, //為頁面存在的分頁增量，比如只顯示5個頁碼，非必須  
    *   pageArray : [], //可以進行生成下拉框，比如 10，20，50 ，選擇不同的頁碼進行分頁，非必須  
    *   previousTitle : '點擊查看',//為上一頁的title顯示，未實現；  
    *   callback : function(pageObject){//為分頁點擊回調函數，必須  
    *     console.log(pageObject);//pageObject= {page : 1,pagesize:10};回調函數返回值，包括下一個頁碼和每頁條數  
    *   }  
    * });  
    * @since 2016年2月15日 15:18:36  
    * @author lixun  
    * @version 1.0  
    * @edited by lixun ,增加多實例；一個頁面多個分頁 ；  
    * 處理思路：  
    * 1\. 對應的每個selector有一個pagination,然后在調用的時候根據selector進行查找  
    * 2\. 處理的內容：1）分頁加載；2）事件綁定 3）回調函數 
    * 3\. 處理原則：平滑處理，原有的可繼續使用；  
    */ 
var pagination = {
    _defaultSelector : '.page .pagination',    //默認選擇器
    _defaultPagesize : 20,                    //默認分頁條數
    _defaultIncrement : 10,                    //默認分的頁碼數
    _defaultPageArray : [10,20,50,100],        //默認的條碼下拉框
    _map : {    //用戶處理多實例增加的容器，不可覆蓋
        //selector : {私有屬性}
        //".page .column" : {}
    },
    //通用屬性
    lastSelector : '',//上一個選擇器，用于開發者不傳遞參數的時候，去查找上一個選擇器用的。
    previousTitle : '上一頁',
    nextTitle : '下一頁',
    previousContent : '上一頁',
    nextContent : '下一頁',
    //獲得分頁實例
    _getPagination : function(selector){
        if(null != selector && selector != '' && $(selector).length > 0){
            return pagination._map[selector];
        }else{
            console.error('selector 傳參錯誤或$('+selector+')不存在!');
        }
        return null;
    },
    //獲得返回的字符串
    pageArrayStr : function(selector,ps){
        var pa = pagination._map[selector].pageArray;
        if(null != pa && pa.length > 0){
            var concatStr = '<select onchange="pagination.changePagesize(\''+(selector)+'\',event)" style="height:20px;line-height:20px;padding:0px;margin-top:-2px;">';
            var i=0,max=pa.length;
            for(;i<max;i++){
                var v = pa[i];
                concatStr += '<option value="'+v+'" '+(v == ps ? 'selected="true"' : '')+'>'+v+'</option>';
            }
            concatStr += '</select>';
            return concatStr;
        }
        return "";
    },

    //綁定事件
    bindEvent : function(selector){
        if(selector && selector != ''){
            var _tempPaginationInstance = pagination._map[selector] || {};
            var _bindE = _tempPaginationInstance.bindE == true ? true : false;
            if(_bindE == false){
                _tempPaginationInstance.bindE = true;
                pagination._map[selector] = _tempPaginationInstance;
                //跳轉頁面
                $(selector).delegate('li.unselect','click',pagination.clickpage);
                //綁定上一頁事件
                $(selector).delegate('li.pageup','click',pagination.pageup);
                //綁定下一頁事件
                $(selector).delegate('li.pagedown','click',pagination.pagedown);
                //綁定前面頁面事件
                $(selector).delegate('a.previous','click',pagination.previouspage);
                //綁定后面頁面事件
                $(selector).delegate('a.next','click',pagination.nextpage);
            }
        }
    },
    //分頁初始化
    init : function(params){
        //處理傳參數據
        params = params || {};
        params.count = params.count || 0;
        params.pagesize = params.pagesize || pagination._defaultPagesize;
        var paramSelector = pagination._defaultSelector;
        if(params.selector){
            paramSelector = params.selector;
        }
        //獲得選擇器后，進行實例處理
        var paginationInstance = pagination._getPagination(paramSelector);
        //傳參獲取最新配置
        var tempPaginationInstance = {
            selector : paramSelector,
            page : params.page ? params.page : (paginationInstance && paginationInstance.action == true ? (paginationInstance.page ? paginationInstance.page : 1) : 1),
            count : params.count || 0,
            action : false,
            bindE : false,//是否綁定事件
            pagesize : params.pagesize,
            callback : params.callback || $.noop,
            pagenumber : (parseInt((params.count || 0)/(params.pagesize||pagination._defaultPagesize),10)+((params.count||0)%(params.pagesize||pagination._defaultPagesize)==0 ? 0 : 1)),//根據總數和一頁條數獲得頁碼數量
            increment :  params.increment || pagination._defaultIncrement,
            pageArray : params.pageArray || pagination._defaultPageArray
        };
        if(paginationInstance && undefined != paginationInstance){
            //存在實例,進行更新。
            tempPaginationInstance.bindE = true;//如果存在的話，肯定綁定了
            pagination._map[paramSelector] = $.extend(paginationInstance,tempPaginationInstance);
        }else{
            pagination._map[paramSelector] = tempPaginationInstance;//重新賦值
            pagination.bindEvent(paramSelector);//綁定事件
        }
        pagination.loadPage(paramSelector);
        pagination.lastSelector = paramSelector;
    },
    //點擊頁面數直接跳轉
    clickpage : function(){
        var $a = $(this).find('a');
        var selector = $a.attr('selector');
        var gonumber = parseInt($a.html(),10);
        $(selector+' li.active').addClass('unselect').removeClass('active');
        $(this).addClass('active').removeClass('unselect');
        pagination.gopage(selector,gonumber);
    },
    //向上翻頁
    pageup :  function(){
        var $a = $(this).find('a');
        var selector = $a.attr('selector');
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            //得到當前頁面，然后翻頁，如果在邊界，那么就要進行觸發一次翻頁事件
            var  $actel = $(selector+' li.active a');
            var nownumber = parseInt($actel.html(),10);
            if(nownumber == 1){
                return false;
            }else{
                pagination.gopage(selector,nownumber-1);
            }
        }
    },
    //向下翻頁
    pagedown : function(){
        var $a = $(this).find('a');
        var selector = $a.attr('selector');
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            var pagenumber = _tempInstance.pagenumber;
            //獲得該實例的分頁碼數
            var  $actel = $(selector+' li.active a');
            var nownumber = parseInt($actel.html(),10);
            if(nownumber == pagenumber){
                return false;
            }else{
                pagination.gopage(selector,nownumber+1);
            }
        }
    },
    //前面頁面
    previouspage : function(){
        var selector = $(this).attr('selector');
        var _tempInstance =pagination._map[selector];
        if(_tempInstance){
            var increment = _tempInstance.increment,
            page = _tempInstance.page;
            //判斷當前是第幾個，比如16，那么就以10的倍數向前翻頁
            var $nowobj = $(selector+' a.previous').parent();
            var nextnumber = parseInt($nowobj.next().children().html(),10);
            var end = (nextnumber-1)%increment > 0 ? parseInt((nextnumber/increment),10)*increment : parseInt((nextnumber/increment-1),10)*increment;
            pagination.gopage(selector, end+1);
        }
    },
    //后面頁面
    nextpage : function(){
        //判斷當前點擊的哪些，比如：現在是5，點擊生成6...
        var selector = $(this).attr('selector');
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            var increment = _tempInstance.increment;
            var $nowobj = $(selector+' a.next').parent();
            var prenumber = parseInt($nowobj.prev().children().html(),10);
            if(parseInt(prenumber/5,10) ==1){//說明在第一頁，要從5加載5個，直到結束
                pagination.addPage(selector,$nowobj,5);
            }else{
                //第二次 增加頁面數量了，應該是從10開始了...
                pagination.addPage(selector,$nowobj,increment);
            }
        }
    },
    addPage : function(selector,domobj,size){
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            var pagenumber = _tempInstance.pagenumber,
            increment  = _tempInstance.increment;
            var start  = parseInt(domobj.prev().children().html(),10);
            pagination.gopage(selector, start+1);
        }
    },
    loadPage : function(selector){
        //根據selector獲得count,pagesize,page
        var _tempInstance = pagination._map[selector];
        if(!_tempInstance){
            console.log('error : _tempInstance is null now ,check pagination params please!');
            return null;
        }
        var count = _tempInstance.count,
            pagesize = _tempInstance.pagesize,
            page = _tempInstance.page,
            increment = _tempInstance.increment,
            pageArrayStr = pagination.pageArrayStr(selector,pagesize),
            pagenumber = _tempInstance.pagenumber;
        var $page = $(selector);
        //清空內容
        $page.html('');
        var pageno = pagenumber;
        page = page > pageno ? 1 : page;    //如果當前頁碼樹大于總頁碼數則置為1，否則為當前頁碼數；

        //如果頁數超過10，則增...,以5個數字遞增，
        //顯示到page頁面的下一個5的倍數上。
        var endpage = (parseInt(page/increment,10))*increment > pageno ? pageno : (parseInt(page/increment,10)+(page%increment==0 ? 0 : 1))*increment;
        if(pageno<=increment){
            endpage = pageno;
        }
        var pageHtml = '';
        if(pageArrayStr== ''){
        }else if(pagination._map[selector].pageArray.length==1){
            pageHtml = '<li class="pageinfo">共'+count+'條 </li>';
        }else{
            pageHtml = '<li class="pageinfo">共'+count+'條 , 每頁'+pageArrayStr+'條</li>';
        }
        $page.append(pageHtml);
        $page.append('<li class="prev pageup '+(page ==1 ? 'disabled' : '')+'"><a title="'+pagination.previousTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.previousContent+'</a></li>');
        //判斷第幾頁
        var start = 0;
        if(page > increment && page <= pageno){
            $page.append('<li><a class="previous" href="javascript：;" selector="'+(selector)+'">...</a></li>');
            //給一個自定義增長數量，比如5個，每次增長五個，當前頁面6頁面，增長5個為10個，start page為 6
            start = parseInt((page%increment==0 ? (page-1) : page)/increment,10)*increment;
            endpage = (start+increment ) > pageno ? pageno : (start+increment);//如果開始頁面加上增加頁面大于最大頁碼數，則等于最大頁碼數
            if(endpage-page <increment){
                start = endpage-increment;
            }
        }
        for(var i=start;i<(endpage == 0?1:endpage);i++){
            var listr = '<li class="unselect"><a href="javascript：;" selector="'+(selector)+'">'+(i+1)+'</a></li>';
            //在第page頁面增加樣式
            if((page-1) == i){
                listr = '<li class="active"><a selector="'+(selector)+'">'+(i+1)+'</a></li>';
            }
            $page.append(listr);
        }
        if(pageno > 5 && endpage != pageno){
            $page.append('<li><a class="next" href="javascript：;" selector="'+(selector)+'">...</a></li>');
        }
        $page.append('<li class="next pagedown '+(page == pageno ? 'disabled' : '')+'"><a title="'+pagination.nextTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.nextContent+'</a></li>');
    },
    //跳轉頁面
    gopage : function(selector,page){
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            _tempInstance.page = page;
            _tempInstance.action = true;
            _callback = _tempInstance.callback;
            _pagesize = _tempInstance.pagesize;
            pagination._map[selector] = _tempInstance;
            _callback(pagination.transform({
                page : page,
                rows : _pagesize
            }));
        }
    },
    /*返回現在的頁面*/
    getNowPage : function(selector){
        selector = selector || (pagination.lastSelector || pagination._defaultSelector);//獲取上一個選擇器
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            _tempInstance.action = true;
            var _page = _tempInstance.page,
                _pagesize = _tempInstance.pagesize;
            pagination._map[selector] = _tempInstance;
            return pagination.transform({
                page : _page,
                rows : _pagesize
            });
        }
        return null;
    },
    transform : function(paginationParams){
        if(pagination.isTransform && pagination.isTransform == true){
            var p = paginationParams.page || 1;
            var rows = paginationParams.pagesize || 10;
            return {
                begin : (p-1)*rows+1,
                end : p*rows
            };
        }
        return paginationParams;
    },
    //返回分頁參數，以供列表頁面加載數據使用
    getParams :function(selector){
        selector = selector || (pagination.lastSelector || pagination._defaultSelector);//獲取上一個選擇器
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            var _pagesize = _tempInstance.pagesize;
            return pagination.transform({
                //第幾頁，一頁有多少條記錄
                page:1,
                rows : _pagesize
            });
        }
        return null;
    },
    changePagesize : function(selector,ev){
        var t = ev.currentTarget || ev.target || ev.srcElement,
            $t = $(t),
            v=$t.find('option:selected').val();
//            selector = $t.attr('selector');
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            _tempInstance.pagesize = v;
            var _callback = _tempInstance.callback;
            pagination._map[selector] = _tempInstance;
            //重新調用callback方法
            _callback(pagination.transform({
                page : 1,
                rows : v
            }));
        }
    }
};

文章首發于 BUG集散地 ,https://chrunlee.cn/article/pagination-web-javascript.html

一篇文章講解“模型-內置標簽之定義標簽”，本篇文章講解“雜項-分頁之分頁實現”。

一、分頁實現

ThinkPHP5.1內置了分頁實現，要給數據添加分頁輸出功能變得非常簡單。

1. 使用Db類實現分頁

1）使用Db類查詢的時候調用paginate方法：

①新建Index控制器，并新建dbpage方法

②新建dbpage.html模板，并在模板中展示數據

預覽：

2）單獨賦值分頁輸出的模板變量

①在ThinkPHP3版本時，分頁模板與數據是單獨分開的，在ThinkPHP5中也支持單獨的分頁模板。

②在dbpage.html模板中，輸出分頁模板

預覽：

注意：
1. 默認情況下，生成的分頁輸出是完整分頁功能，帶總分頁數據和上下頁碼，分頁樣式只需要通過樣式修改即可，完整分頁默認生成的分頁輸出代碼為：
<ul>
<li>
<span>?</span>
</li>
<li>
<span>1</span>
</li>
<li>
<a href="url?page=2">2</a>
</li>
</ul>

3）單獨獲取總數據數

預覽：

2. 模型的分頁查詢

以上使用的是Db類的分頁查詢方式，也可以使用模型進行分頁查詢。

①新建User模型，并新建getList方法，獲取分頁查詢數據

②在Index控制器中，新建modelpage方法，調用模型中的getList方法

③新建modelpage.html模板，在模板中輸出數據

預覽：

注意：
1. 使用模型類實現分頁與Db類實現分頁相同，其中Db類可以獲取的總頁數、單獨輸出分頁在模型類中依舊可以實現。

3. 傳入總記錄數

支持傳入總記錄數而不會自動進行總數計算。

①在Index控制器中，新建totalnum方法

②新建totalnum.html模板，在模板中輸出數據

注意：
1. 對于UNION查詢以及一些特殊的復雜查詢，推薦使用這種方式首先單獨查詢總記錄數，然后再傳入分頁方法。

4. 分頁后數據處理

支持分頁類后數據直接each遍歷處理，方便修改分頁后的數據，而不是只能通過模型的獲取器來補充字段。

1）使用模型進行分頁后數據處理

①在Index控制器中，新建eachnum方法

②新建totalnum.html模板，在模板中輸出數據

預覽：

2）使用Db類進行分頁后數據處理

如果是Db類操作分頁數據的話，each方法的閉包函數中需要使用返回值。

①在Index控制器中，新建dbeach方法

預覽：?

ThinkPHP5連載為卓象程序員原創，轉載請聯系卓象程序員

關注卓象程序員，定期發布技術文章

下一篇講解“雜項 - 分頁之簡潔分頁”

在線咨詢

上一篇：如何使用CSS重置
下一篇：什么是HTM或HTML文件？如何打開HTM和HTML文件？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商