使用 jQuery 實現分頁功能

xuanxuanQueen發表於2019-09-11
jQuery
<script>
function data() {
    $.ajax({
        type: 'get',
        url: 'http://route.showapi.com/341-1',
        dataType: 'json',
        data: {
            "showapi_appid": '******', //這裡需要改成自己的appid
            "showapi_sign": '******',  //這裡需要改成自己的應用的金鑰secret
            "page":"1",
            "maxResult":"20"    
        },

        error: function(XmlHttpRequest, textStatus, errorThrown) {
            alert("操作失敗!");
        },
        success: function(result) {
            console.log(result); //console變數在ie低版本下不能用
            console.log(result.showapi_res_body.contentlist[0]);
            //原始資料陣列
            var total = result.showapi_res_body.contentlist;
            console.log(total);
            //每頁顯示條數(常量)
            var row = 10;
            //可以的得出生成的總頁數
            var pages = total.length/row;
            //預設顯示第一頁
            var page = 1;
            var array1 = [];
            var array2 = [];
            //動態生成頁數按鈕及每頁對應的內容
            for(var i = 1; i < pages + 1; i++){
                var pagebtn = $("<button id="+'page'+i+" >" + i + "</button>");
                $('footer').append(pagebtn);
                if(page == i){
                page++;
                var content = total.slice((i-1)*10,i*10);
                console.log(content);
                //這裡的text可以封裝一個函式來渲染顯示的內容，專注於分頁的實現所以就偷懶0.0
                var text = $("<p id="+'text'+i+" >內容:" + content[i].text + "</p>");
                $("footer").append(text);
                text.hide();
            }
            //獲取動態生成的按鈕和內容的id，並把它們各自新增到陣列中去
            var btnid ='#' + $(pagebtn).attr('id');
            array1.push(btnid);
            var textid = '#' + $(text).attr('id');
            array2.push(textid);
            console.log(array1,array2);
            //使用自定義函式將兩個陣列合併成一個鍵值對陣列
            var aaa = newText(array1,array2);
            //遍歷陣列，使用自定義函式實現點選不同的按鈕顯示按鈕對應的內容
            for(var key in aaa){
                var strkey = String(key);
                var strvalue = aaa[key];
                console.log(strkey,strvalue);
                newbtn(strkey,strvalue);//自定義函式
            }
        }
    })
}
data();
//點選每個按鈕顯示每頁對應的內容,並隱藏其他頁的內容
function newbtn(key,val){
    $(key).click(function(){
        $(val).show();
        $("p").not(val).hide();
    })
}
//形參a是鍵,b是值，將兩個陣列合併成鍵值對的函式  
function newText(a,b) {
    var arrayt = []; 
    for(var i = 0; i < a.length; i++){
        arrayt[a[i]] = b[i];
    }
    return arrayt;
}
</script>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章