jquery插件分頁Demo

備注: 作用于，前台隻需要傳每一頁的數量pageSize，和頁碼pageNo。 背景直接傳回相應頁碼的資料，不是在前台做分頁處理

- 1. 引用jquery分頁插件 jquery.pager.js

- 2. 在頁面中加入盛放頁碼的容器div

- 3. 添加js代碼

- 4. 引入分頁樣式（也可直接複制樣式到你的樣式表中）

1. 引用jquery分頁插件 jquery.pager.js

<!--有jq則不用再引用jq，沒有則需引入-->
<script type="text/javascript" src="js/jquery.pager.js"></script>
           

2. 在頁面中加入盛放頁碼的容器div

<!--分頁開始-->
    <div class="pager-bottom"  > 
        <div id="pager" class="page"></div>
    </div>  
<!--分頁結束-->
           

3. 添加js代碼

3.1 在生成html清單時，加入分頁方法
 3.2 添加建立分頁方法
 3.3 點選頁面的回調
           

var PARAMS = {
            pageSize    : PAGE_SIZE,
            pageNo      : PAGE_NO
            //你的參數  
        };
           

//3.1 顯示清單
//data 顯示的主體内容
//params 主要是pageSize和pageNo
        showStudentInfoListHtml: function(data, params) {
            var list = data.statistics_list;
            var listHtml = "";
            var listStyle = '';
            var html = '';
            var listMaxSize = (list.length > PAGE_SIZE) ? PAGE_SIZE : list.length; //最大顯示清單條數
            var number = (params.pageNo - ) * ;
            for(var i = ; i < listMaxSize; i++) {
                listHtml = "";
                listStyle = (i %  == ) ? '' : 'bgcolor';
                number ++;//序号從1開始
                listHtml += '<tr class="' + listStyle + '">'
                          +     '<td>' + number + '</td>'
                          +     '<td data="' + list[i].user_id + '">' + list[i].real_name + '</td>'                 
                          + '</tr>';
                html += listHtml;
            }
            $('#myDemo').html(html);
            this.createPager(data, params); //前面代碼可忽略，隻要這句
        },
           

//3.2 建立分頁
        createPager : function(data, params){
            if(data.responseStatus.resultcode == '0' && data.total > ){
                //請求成功，并且總數大于0才顯示分頁控件
                $("#pager").pager({
                    pagenumber  : params.pageNo || PAGE_NO,
                    total       : data.total, 
                    pageSize    : params.pageSize || PAGE_SIZE,                 
                    buttonClickCallback : this.pageButtonClick, /* this 本對象 */
                    hideLabel:false,
                    showText: false
                }); 
                $(".page").show();
            }else{
                $(".page").hide();
            }
        },
           

//3.3 頁碼 按鈕 回調          
        this.pageButtonClick = function(pageNo){
            var params = PARAMS; //根據你的業務需要，擷取參數
            params.pageNo = pageNo; // 主要是有這個頁碼pageNo
            _this.getStudentList(params); // 擷取清單 
        };
           

4. 引入分頁樣式（也可直接複制樣式到你的樣式表中）

/*分頁樣式*/
.pager-bottom {
    width: %;
    margin: px px px px;
    float: left;
}

.pager-bottom .page {
    float: right;
    margin-bottom: px;
}

.pager-bottom .page .page-nav {
    display: inline-block;
}

.pager-bottom .page ul {
    list-style: none;
    padding: px;
    width: %;
    height: px;
    float: left;
    display: inline-block;
}

.pager-bottom .page ul li {
    font-family: Arial;
    cursor: pointer;
    width: px;
    height: px;
    float: left;
    border: px solid #ccc;
    line-height: px;
    text-align: center;
    color: #6f7880;
    margin-right: px;
    font-size: px;
    padding: ;
    margin-left: ;
    margin-top: ;
    border-radius: ;
}

.pager-bottom .page ul li:hover {
    background: #5880f0;
    border: px solid #5880f0;
    color: #fff;
    box-shadow: none;
    -webkit-box-shadow: none;
    -webkit-transition: none;
    transition: none;
}

.pager-bottom .page ul .pgPre {
    width: px;
    height: px;
    background: url(common-icon.png) -px -px no-repeat;
    border: none;
}

.pager-bottom .page ul li.pgPre:hover {
    background: url(common-icon.png) -px -px no-repeat;
    border: none;
}

.pager-bottom .page ul li.omit {
    border: px;
    width: px;
    background: none;
}

.pager-bottom .page ul li.omit:hover {
    background: none;
    border: none;
    cursor: auto;
    color: #999;
}

.pager-bottom .page ul .pgNext {
    background: url(common-icon.png) -px -px no-repeat;
    width: px;
    height: px;
    border: none;
}

.pager-bottom .page ul .pgNext:hover {
    background: url(icon.png) -px -px no-repeat;
    border: none;
}

.pager-bottom .page ul li.choose {
    border: px solid #5880f0;
    background: #5880f0;
    color: #fff;
}
.pager-bottom .page ul li.pgCurrent {
    border:px solid #5880f0;
    background: #5880f0;
    color:#fff;
}
.pager-bottom .page ul li.choose.prePage {
    background: url(../../../image/arrow-left-hover.png) no-repeat;
    border: none;
}

.pager-bottom .page ul li.choose.nextPage {
    background: url(../../../image/arrow-right-hover.png) no-repeat;
    border: none;
}

.pager-bottom .page a.noborder {
    border: px solid #999;
}

.pager-bottom .page a .noboder1 {
    border: px solid #999;
    color: #0592ec;
}

.pager-bottom .page .positionPage {
    width: auto;
    height: px;
    border: none;
    font-size: px;
    font-family: "宋體";
    color: #999;
    font-weight: normal;
    background: none;
}

.pager-bottom .page .positionPage:hover {
    background: none;
    border: none;
    cursor: auto;
    color: #999;
}

.pager-bottom .page .pgInput {
    width: px;
    height: px;
    line-height: px;
    border: px solid #ccc;
    text-align: center;
    color: #999;
    font-family: Arial;
    font-size: px;
}

.pager-bottom .page a.next {
    color: #0592ec;
}

.pager-bottom .page .totalPage {
    width: px;
    border: none;
    font-size: px;
    font-family: "宋體";
    color: #999;
    font-weight: normal;
    background: none;
    line-height: px;
}

.pager-bottom .page .totalPage:hover {
    background: none;
    border: none;
    cursor: auto;
    color: #999;
}

.pager-bottom .page .totalPage:hover {
    background: none;
}

.pager-bottom .page ul li.determine {
    border: none;
    background: none;
}

.pager-bottom .page ul li.determine:hover {
    background: none;
}

#pageSubmit {
    width: px;
    height: px;
    line-height: px;
    background: #fff;
    line-height: px;
    color: #404040;
    border: px solid #ccc;
    text-align: center;
    font-family: "宋體";
    margin-top: -px;
    margin-left: px;
    font-size:px;
    display:inline-block;
}

#pageSubmit:hover {
    background: #5880f0;
    color: #fff;
    border: px solid #5880f0;
    cursor:pointer;
}