鍍金池/ 問答/HTML/ ajax分頁 頁面跳轉(zhuǎn)失敗

ajax分頁 頁面跳轉(zhuǎn)失敗

1、根據(jù)網(wǎng)上的教程,寫了一個分頁查詢,但是查詢出結(jié)果后,頁面下一頁的值一直是2,最后一頁是0,點擊沒有反應(yīng);

var display = 5;//規(guī)定每頁顯示的條數(shù)
var page = 1;//當(dāng)前頁碼
$(document).ready(function(e) {
    
    $("#submit").click(function(){        
        //頁面加載數(shù)據(jù)
        Load();  
        //加載分頁列表
        Loadlist();    
    })
})                
    


//加載數(shù)據(jù)的方法
function Load(page){   
    var key = $("#key").val();
    var time = $("#time").val();
        $.ajax({
            
            url:"taobao_ajax.php",
            data:{page:page,display:display,key:key,time:time},
            type:"POST",
            dataType:"html",                             
            success: function(data){                                                         

            
                var str = "";
                var hang = data.split("|");
                console.log(hang);
                //split拆分字符串
                for (var i = 0; i < hang.length; i++) {
                    //通過循環(huán)取到每一行;拆分出列;
                    var lie = hang[i].split("^");
                    str +='<div class="row row_box">' + 
                    '<div class="col-md-3">' + 
                    '<h3 class="tit lead"><a href="' + lie[2] + '" target="_blank">【' + lie[6] + '】' + lie[0] + '</a></h3>' + 
                    '</div>' + 
                    '<div class="col-md-2">' + 
                    '<a href="' + lie[2] + '" target="_blank"><img class="img-responsive" src="' + lie[1] + '" /></a>' + 
                    '</div>' + 
                    '<div class="col-md-2">' + 
                    '<i class="iconfont">&#xe70c;</i>在售價:' + lie[3] + ';' + 
                    '</div>' + 
                    '<div class="col-md-2">' + 
                    '<i class="iconfont">&#xe697;</i>優(yōu)惠券結(jié)束時間:' + lie[9] + ';' + 
                    '</div>' + 
                    '<div class="col-md-3">' + 
                    '<div class="quan"><a href="' + lie[10] + '"><span class="quan_01">' + lie[7] + '</span><span class="quan_02">領(lǐng)券</span></a></div>' + 
                    '</div>' + 
                    '</div>';
                }
                $("#data").html(str);            
            
            

            }
        })
}  

//總頁數(shù)
function countpage(){
    var countpage = 0;
    var key = $("#key").val();
    var time = $("#time").val();
    $.ajax({
        
        url:"taobao_countpage.php",
        data:{key:key,time:time},
        type:"POST",
        dataType:"TEXT",
        success:function(data){
            countpage = Math.ceil(data/display);
            console.log(countpage);
            
        }
    });
    return countpage;
}



//分頁列表            
function Loadlist() {
    console.log(page);
    if(page > countpage()) {
        page = countpage();
    }
    if(page < 1) {
        page = 1;
    }

    pageBar = "";

    //如果不是第一頁
    if(page != 1){
        pageBar += "<a href='javascript:Load(1)'>首頁</a>";
        pageBar += "<a href='javascript:Load("+(page-1)+")'>上一頁</a>";
    }
      //如果不是最后頁
    if(page != countpage()){
        pageBar += "<a href='javascript:Load("+(parseInt(page)+1)+")'>下一頁</a>";
        pageBar += "<a href='javascript:Load("+countpage()+")'>尾頁</a>";
    }
    
    $("#fenye").html(pageBar);
}
回答
編輯回答
懶洋洋

countpage中的ajax是一個異步請求,頁面第一次加載,這時候還未拿到數(shù)據(jù),你在使用countpage()方法的時候,要保證這時候是拿到數(shù)據(jù)的。

2018年3月8日 17:07