使用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 协议》，转载必须注明作者和本文链接