使用 jQuery 實現分頁功能

xuanxuanQueen 發表於 2019-09-11
<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>

相關文章

前端基礎入門六(JQuery進階) 前端|jQuery

前端基礎入門六(JQuery進階)

jQuery特殊屬性操作val方法val方法用於設定和獲取表單元素的值,例如input、textarea的值//設定值$("#name").val(“張三”);//獲取值$("#name").val(
Vue中使用jquery Vue|jQuery

Vue中使用jquery

在vue專案中,需要實現某些特定的功能時,使用mvvm模式不易實現。因此引入jquery包來完成需求jquery中的觸發事件可以自己定義在mounted中,如果需要使用vue中data的資料,直接使用
前端基礎入門五(掌握jQuery的常用api,實現動態效果) 前端|jQuery

前端基礎入門五(掌握jQuery的常用api,實現動態效果)

jQuery基本概念學習目標:學會如何使用jQuery,掌握jQuery的常用api,能夠使用jQuery實現常見的效果。為什麼要學習jQuery?【01-讓div顯示與設定內容.html】使用jav
[譯] 2019 年了,為什麼我還在用 jQuery? jQuery

[譯] 2019 年了,為什麼我還在用 jQuery?

譯者按: 看來 jQuery 還是有一些用武之地的。原文: Why I'm Still Using jQuery in 2019譯者: Fundebug為了保證可讀性,本文采用意譯而非直譯。翻譯僅供學
為什麼我在2019年仍在使用jQuery? jQuery

為什麼我在2019年仍在使用jQuery?

許多人提倡“只使用vanilla JavaScript,你不需要jQuery”。其實我覺得許多JavaScript API - 特別是DOM API - 很糟糕。 el.insertAdjacentE
jQuery 利用萬用字元獲取多選框選中的值 jQuery

jQuery 利用萬用字元獲取多選框選中的值

1.首先看看jQuery的萬用字元使用:$("input[id^='code']");//id屬性以code開始的所有input標籤$("input[id$='code']");//id屬性以code
使用jQuery每10秒自動載入和重新整理Div。 jQuery

使用jQuery每10秒自動載入和重新整理Div。

你有沒有看到這個Twitter搜尋和Facebook顯示最新的推特/帖子數量從資料庫每10秒在頁面頂部。我用jQuery和Ajax開發了這樣的東西。它只是簡單的5行程式碼例1:Index.html包含
jquery 操作HTML data全域性屬性快取的坑 jQuery

jquery 操作HTML data全域性屬性快取的坑

data-* 全域性屬性 是一類被稱為自定義資料屬性的屬性,它賦予我們在所有 HTML 元素上嵌入自定義資料屬性的能力,並可以通過指令碼(一般指JavaScript) 與 HTML 之間進行專有資料的
jQuery 操作 DOM jQuery

jQuery 操作 DOM

attr(name); //獲取元素屬性,引數name表示屬性名稱attr(key,value); //設定元素屬性,引數key表示屬性名稱,value表示屬性值attr({key0:value0
jQuery select 觸發事件 jQuery

jQuery select 觸發事件

jquery select 觸發事件$('.check').change(function(){ var data= $(this).val(); alert(data);
jQuery 的58種事件方法你都用過了嗎 jQuery

jQuery 的58種事件方法你都用過了嗎

jQuery 事件方法事件方法觸發或將函式附加到所選元素的事件處理程式。下表列出了用於處理事件的所有jQuery方法。方法描述bind()在3.0版中已棄用。 請改用on()方法。將事件處理程式附加到