jquery插件分页Demo

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 - 1) * 10;
            for(var i = 0; i < listMaxSize; i++) {
                listHtml = "";
                listStyle = (i % 2 == 0) ? '' : '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){
                //请求成功，并且总数大于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: 90%;
    margin: 40px 50px 40px 50px;
    float: left;
}

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

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

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

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

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

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

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

.pager-bottom .page ul li.omit {
    border: 0px;
    width: 25px;
    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) -10px -560px no-repeat;
    width: 36px;
    height: 36px;
    border: none;
}

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

.pager-bottom .page ul li.choose {
    border: 1px solid #5880f0;
    background: #5880f0;
    color: #fff;
}
.pager-bottom .page ul li.pgCurrent {
    border:1px 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: 0px solid #999;
}

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

.pager-bottom .page .positionPage {
    width: auto;
    height: 22px;
    border: none;
    font-size: 13px;
    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: 39px;
    height: 23px;
    line-height: 23px;
    border: 1px solid #ccc;
    text-align: center;
    color: #999;
    font-family: Arial;
    font-size: 14px;
}

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

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

.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: 50px;
    height: 25px;
    line-height: 20px;
    background: #fff;
    line-height: 25px;
    color: #404040;
    border: 1px solid #ccc;
    text-align: center;
    font-family: "宋体";
    margin-top: -1px;
    margin-left: 5px;
    font-size:12px;
    display:inline-block;
}

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