ajax分页

1.css

/*分页*/
#page {
    width: 1250px;
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
}

#page ul {
    overflow: hidden;
    display: inline-block;
}
ul, li {
    list-style: none;
}
#page ul li {
    width: 34px;
    height: 34px;
    background-color: #f1f1f1;
    margin: 0 10px;
    line-height: 34px;
    ;
    float: left;
    position: relative;
    border-radius: 100%;
    cursor: pointer;
}

#page .prve,
#page .next {
    width: 34px;
    height: 34px;
    background-color: #f1f1f1;
    margin: 0 10px;
    float: left;
    position: relative;
    border-radius: 100%;
    cursor: pointer;
}

#page .prve i,
#page .next i {
    width: 9px;
    height: 17px;
    display: block;
    background: url(../img/page.png) no-repeat;
    position: absolute;
    top: 8.5px;
    left: 12.5px;
}

#page .prve i {
    background-position: 0 -25px;
}

#page .next i {
    background-position: -17px -25px
}

#page li.active {
    background-color: #19a9d5;
    color: #fff;
}
/*/分页*/

2.js

// 保存 当前页
var PAGING=1;
function pages(a,b,c){
    var par=$('#page');
    par.empty();
    var yesum=Math.ceil(c/b);
    var html='';
    html+='<ul>';
    if(yesum<=5){
        for(var i=1;i<=yesum;i++){
            html+='<li class="num a'+i+'">'+i+'</li>';
        };
    };
    if(yesum>5){
        html+='<li class="prve"><i></i></li>';
        if(a<=3){
            for(var i=1;i<=4;i++){
                html+='<li class="num a'+i+'">'+i+'</li>';
            };
            html+='<li class="mid">...</li>';
        }else if(a>=(yesum-3)){
            html+='<li class="mid">...</li>';
            for(var i=3;i>=0;i--){
                html+='<li class="num a'+(yesum-i)+'">'+(yesum-i)+'</li>';
            };
        }else{
            html+='<li class="mid">...</li>';
            for(var i=0;i<4;i++){
                html+='<li class="num a'+(a+i)+'">'+(a+i)+'</li>';
            };
            html+='<li class="mid">...</li>';
        }
        html+='<li class="next"><i></i></li>';
    };
    html+='</ul>';
    par.append(html);
    par.find('.a'+a).addClass('active').removeClass('num');
};
$('#page').on('click','.num',function(){
    ajaxPage(parseInt($(this).html()))
});
$('#page').on('click','.next',function(){
    var n = PAGING+1;
    if(n > $('.num:last').html()) return;
    ajaxPage(n)
});
$('#page').on('click','.prve',function(){
    var n = PAGING-1;
    if(n <= 0) return;
    ajaxPage(n);
})

3.调用

ajaxPage(PAGING);
function ajaxPage(page){
    /*page_now 第几页
    rows    每页条数
    status 审批状态
    reimbur_type 审批类型
    is_connect 审批类型
    type_id 费用类别*/
    PAGING=page;
    var sum=10; // 每页显示个数
    $.ajax({
        type:'post',
        url: "{:U('ReimburApi/myReimbur')}",
        data:{
            'page_now':page,
            'rows':sum,
        },
        dataType:'json',
        success:function(data){
            //debugger
            console.log(data);
            //return false;
            if(data.status==0){
                if (data.data.lists.length==0) {
                    $('.biaoge tbody').html('<tr><td colspan="12">当前状态没有费用单！</td></tr>');
                } else{
                    setFydList(data.data.lists,data.data.total_num,PAGING);
                    pages(page,sum,data.data.total_num); // 当前页数，每页显示个数，总条数
                }
            }else{
                console.log('查询失败！')
                console.log(data.msg)
            }
            
        },
        error:function(data){
            console.log('提交异常');
        }
    });
}    

//遍历列表
function setFydList(data,count,page){
    startNum = count - (page - 1) * 10; // 每页开始的序列号,5为每个显示个数
    $('.biaoge tbody').empty();
    for (var i=0;i<data.length;i++) {
        var html = '';
        html += '<tr>';
        html += '    <td>'+data[i].create_time+'</td>';
        html += '    <td>'+data[i].admin_name+'</td>';
        html += '    <td>'+data[i].reimbur_type+'</td>';
        html += '    <td>'+data[i].item_connect+'</td>';
        html += '    <td>'+data[i].sale_name+'</td>';
        html += '    <td>'+data[i].type_title+'</td>';
        html += '    <td>'+data[i].total_amount+'</td>';
        html += '    <td>'+data[i].describe+'</td>';
        html += '    <td>'+data[i].current_status+'</td>';
        html += '    <td>'+data[i].rec_update_time+'</td>';
        html += '    <td>'+data[i].remark+'</td>';
        html += '    <td>';
        if (data[i].caozuo_status==1) {
                //查看
            html += '        <a class="ck" href="">查看</a>';
        } else if (data[i].caozuo_status==3){
                //修改，查看，删除
            html += '        <a class="xg" href="">修改</a>';
            html += '        <a class="ck" href="">查看</a>';
            html += '        <a class="sc" href="">删除</a>';    
        }
        html += '    </td>';
        html += '</tr>';
        $('.biaoge tbody').append(html);
    }
}