ajax分頁

Loong_T 發布于2019-08-22 11:19 / 2906人閱讀

摘要：分頁分頁保存當前頁調用第幾頁每頁條數審批狀態審批類型審批類型費用類別每頁顯示個數當前狀態沒有費用單當前頁數，每頁顯示個數，總條數查詢失敗提交異常遍歷列表每頁開始的序列號為每個顯示個數查看查看修改，查看，刪除修改查看刪除

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+="";
    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.調用

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("當前狀態沒有費用單！");
                } 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";
        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);
    }
}

GPU云服務器云服務器無刷新ajax分頁 ajax分頁查詢 ajax實現分頁 ajax異步分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92165.html

一步步實現thinkphp上的ajax無刷新分頁

摘要：信息列表循環賦值分頁信息部分這一步是實現無刷新分頁的重點，用到了的通信，通過與數據庫的交互，將獲取到的數據寫到模板中，替換掉之前的數據集，達到分頁的目的。前言 thinkphp框架自帶的分頁類是每次翻頁都要刷新一下整個頁面，這種翻頁的用戶體驗顯然是不太理想的，我們希望每次翻頁只刷新我們想要的數據集部分的數據，這樣我們很容易想到ajax異步通信，用ajax與數據庫（本人在開發過程中使用...

張遷 2019-06-27 14:04 評論0 收藏0
ajax分頁

摘要：一個比較簡單，但是需要多一個頁面的分頁方法首先請求傳輸數據到后臺進行處理與一般的寫法沒有什么不同，只是在成功返回的時候對輸出的進行了覆蓋，然后調用一個方法，方法在后面。一個比較簡單，但是需要多一個頁面的ajax分頁方法首先請求傳輸數據到后臺進行處理 $(function(){ $(.btn).click(function(){ var phone = $(#...

mindwind 2019-06-27 14:55 評論0 收藏0
jQuery+Ajax+PHP無刷新分頁

摘要：下載演示地址本文使用，通過實例講解如何實現無刷新分頁效果。當數據完全加載完畢后，調用函數生成分頁，也可用程序來實現分頁。頁面可在分頁的屬性中獲取。下載演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通過實例講解如何實現Ajax無刷新分頁效果。 #ul_lists以列表的形式展現數據，信...

wangzy2019 2019-08-21 11:38 評論0 收藏0
jQuery+Ajax+PHP無刷新分頁

摘要：下載演示地址本文使用，通過實例講解如何實現無刷新分頁效果。當數據完全加載完畢后，調用函數生成分頁，也可用程序來實現分頁。頁面可在分頁的屬性中獲取。下載演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通過實例講解如何實現Ajax無刷新分頁效果。 #ul_lists以列表的形式展現數據，信...

Kosmos 2019-06-27 15:43 評論0 收藏0
jQuery+Ajax+PHP無刷新分頁

摘要：下載演示地址本文使用，通過實例講解如何實現無刷新分頁效果。當數據完全加載完畢后，調用函數生成分頁，也可用程序來實現分頁。頁面可在分頁的屬性中獲取。下載演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通過實例講解如何實現Ajax無刷新分頁效果。 #ul_lists以列表的形式展現數據，信...

lauren_liuling 2019-08-14 17:46 評論0 收藏0
jQuery+Ajax+PHP無刷新分頁

摘要：下載演示地址本文使用，通過實例講解如何實現無刷新分頁效果。當數據完全加載完畢后，調用函數生成分頁，也可用程序來實現分頁。頁面可在分頁的屬性中獲取。下載演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通過實例講解如何實現Ajax無刷新分頁效果。 #ul_lists以列表的形式展現數據，信...

mengbo 2019-08-01 16:30 評論0 收藏0