ajax分頁(yè)

Loong_T 發(fā)布于2019-08-22 11:19 / 2952人閱讀

摘要：分頁(yè)分頁(yè)保存當(dāng)前頁(yè)調(diào)用第幾頁(yè)每頁(yè)條數(shù)審批狀態(tài)審批類型審批類型費(fèi)用類別每頁(yè)顯示個(gè)數(shù)當(dāng)前狀態(tài)沒(méi)有費(fèi)用單當(dāng)前頁(yè)數(shù)，每頁(yè)顯示個(gè)數(shù)，總條數(shù)查詢失敗提交異常遍歷列表每頁(yè)開(kāi)始的序列號(hào)為每個(gè)顯示個(gè)數(shù)查看查看修改，查看，刪除修改查看刪除

1.css

/*分頁(yè)*/
#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;
}
/*/分頁(yè)*/

2.js

// 保存 當(dāng)前頁(yè)
var PAGING=1;
function pages(a,b,c){
    var par=$("#page");
    par.empty();
    var yesum=Math.ceil(c/b);
    var html="";
    html+="";
    if(yesum<=5){
        for(var i=1;i<=yesum;i++){
            html+=""+i+"";
        };
    };
    if(yesum>5){
        html+="";
        if(a<=3){
            for(var i=1;i<=4;i++){
                html+=""+i+"";
            };
            html+="...";
        }else if(a>=(yesum-3)){
            html+="...";
            for(var i=3;i>=0;i--){
                html+=""+(yesum-i)+"";
            };
        }else{
            html+="...";
            for(var i=0;i<4;i++){
                html+=""+(a+i)+"";
            };
            html+="...";
        }
        html+="";
    };
    html+="";
    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.調(diào)用

ajaxPage(PAGING);
function ajaxPage(page){
    /*page_now 第幾頁(yè)
    rows    每頁(yè)條數(shù)
    status 審批狀態(tài)
    reimbur_type 審批類型
    is_connect 審批類型
    type_id 費(fèi)用類別*/
    PAGING=page;
    var sum=10; // 每頁(yè)顯示個(gè)數(shù)
    $.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("當(dāng)前狀態(tài)沒(méi)有費(fèi)用單！");
                } else{
                    setFydList(data.data.lists,data.data.total_num,PAGING);
                    pages(page,sum,data.data.total_num); // 當(dāng)前頁(yè)數(shù)，每頁(yè)顯示個(gè)數(shù)，總條數(shù)
                }
            }else{
                console.log("查詢失??！")
                console.log(data.msg)
            }
            
        },
        error:function(data){
            console.log("提交異常");
        }
    });
}    

//遍歷列表
function setFydList(data,count,page){
    startNum = count - (page - 1) * 10; // 每頁(yè)開(kāi)始的序列號(hào),5為每個(gè)顯示個(gè)數(shù)
    $(".biaoge tbody").empty();
    for (var i=0;i";
        html += "    "+data[i].admin_name+"";
        html += "    "+data[i].reimbur_type+"";
        html += "    "+data[i].item_connect+"";
        html += "    "+data[i].sale_name+"";
        html += "    "+data[i].type_title+"";
        html += "    "+data[i].total_amount+"";
        html += "    "+data[i].describe+"";
        html += "    "+data[i].current_status+"";
        html += "    "+data[i].rec_update_time+"";
        html += "    "+data[i].remark+"";
        html += "    ";
        if (data[i].caozuo_status==1) {
                //查看
            html += "        查看";
        } else if (data[i].caozuo_status==3){
                //修改，查看，刪除
            html += "        修改";
            html += "        查看";
            html += "        刪除";    
        }
        html += "    ";
        html += "";
        $(".biaoge tbody").append(html);
    }
}