web前端经常遇到的json数据的翻页处理

来源：互联网发布：朱文臣的网络与编辑：程序博客网时间：2024/05/22 00:26

作为web前端入门的攻城狮第一次写博文，提升自己，望大家指正，互相学习！

这次写的是web前端经常遇到的json数据的请求和翻页处理。

下面是代码：
html部分：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ajax请求数据</title>    <script src="js/jquery-2.1.1.min.js"></script>    <script src="js/ajax-test.js"></script></head><body>    <div>        <ul></ul>    </div>    <div class="pagelist">        <span>共<p></p>条，每页显示<p></p>条</span>        <button>上一页</button><button>下一页</button>        <span>跳转至</span>        <input type="text" name="currPage" class="targetNum" title="">        <button style="width: 45px;">确定</button>    </div></body></html>

js代码：

$(function(){    //把json数据放入数组    var arr=[],        itemNum=5;//每页显示数据    $.ajax({        type:"get",        url:"http://www.***************/请求json数据",        dataType:"jsonp",        success:function(data){            $.each(data,function(n,value){                /*返回数据处理，因自己所传数据而定*/                })            });            viewArr(arr,1,itemNum);            pageBtnResize(Math.ceil(arr.length/itemNum));        }    });    //数据展示    function viewArr(arr,pageNum,itemNum){        var arrLen=arr.length;        var vLen=itemNum*pageNum;        var i=itemNum*(pageNum-1);        var str="";        if(pageNum<1){            return;        }        if(vLen>arrLen){            vLen=arrLen;        }        for(i;i<vLen;i++){            str+="<li>"+arr[i]+"</li>";        }        $("div ul").html(str);    }    //页码初始化    function pageBtnResize(pageNumAll){        var btn1=$("<button class='pageNum currentnum'>1</button>");        var btn2=$("<button class='pageNum'>2</button>");        var span=$("<span class='dian'> ...</span>");        var btnall=$("<button class='pageNum'>"+pageNumAll+"</button>");        if(pageNumAll<8){            var j=pageNumAll;            for(var i=1;i<pageNumAll;i++){                var btn=$("<button class='pageNum'>"+(j)+"</button>");                j--;                $(".pagelist button").eq(0).after(btn1,btn);            }        }else{            $(".pagelist button").eq(0).after(btn1,btn2,span,btnall);        }        $(".pagelist button").on("click",function(){            var sBtn=$(this);            target(sBtn);        });        $(".pagelist span p").eq(0).css("display","inline").html(arr.length);        $(".pagelist span p").eq(1).css("display","inline").html(itemNum);    }    //页码按钮判断    function target(btn){        var sBtn=$(btn).text();        var currenNum=$(".pagelist .currentnum").text();        var pageNumAll=$(".pagelist .pageNum:last").text();        if(sBtn==="上一页"||sBtn==="下一页"){            if(sBtn==="上一页"){                if(currenNum>=2){                    currenNum--;                }            }            if(sBtn==="下一页"){                if(parseInt(currenNum)<parseInt(pageNumAll)){                    currenNum++;                }            }        }else if(sBtn==="确定"){            var targetnum=$(".pagelist input").val();            targetnum=parseInt(targetnum);            if(!targetnum||targetnum===""||targetnum>parseInt(pageNumAll))            {                alert("跳转的页码有误！");            }else{                currenNum=targetnum;            }        }else{            currenNum=sBtn;        }        turnPage(currenNum,pageNumAll);    }    //翻页按钮的切换效果    function turnPage(targetnum,pageNumAll){        var btn1=$("<button onclick='' class='pageNum'><a>1</a></button>");        var btn2=$("<button onclick='' class='pageNum'>"+(targetnum-1)+"</button>");        var btn3=$("<button onclick='' class='pageNum currentnum'>"+targetnum+"</button>");        var btn4=$("<button onclick='' class='pageNum'>"+(parseInt(targetnum)+1)+"</button>");        var span1=$("<span class='dian'> ...</span>");        var span2=$("<span class='dian'> ...</span>");        var btnall=$("<button class='pageNum'>"+pageNumAll+"</button>");        if(pageNumAll<8){            $(".pagelist .pageNum").removeClass("currentnum").eq(targetnum-1).addClass("currentnum");        }else{            $(".pagelist .pageNum").remove();            $(".pagelist .dian").remove();            if(targetnum>3&&targetnum<pageNumAll-2){                $(".pagelist button").eq(0).after(btn1,span1,btn2,btn3,btn4,span2,btnall);            }else if(targetnum==3){                $(".pagelist button").eq(0).after(btn1,btn2,btn3,btn4,span2,btnall);            }if(targetnum==2){                $(".pagelist button").eq(0).after(btn1,btn3,btn4,span2,btnall);            }if(targetnum==1){                $(".pagelist button").eq(0).after(btn3,btn4,span2,btnall);            }if(targetnum==(pageNumAll-2)){                $(".pagelist button").eq(0).after(btn1,span1,btn2,btn3,btn4,btnall);            }if(targetnum==(pageNumAll-1)){                $(".pagelist button").eq(0).after(btn1,span1,btn2,btn3,btnall);            }if(targetnum==(pageNumAll)){                $(".pagelist button").eq(0).after(btn1,span1,btn2,btn3);            }        }        $(".pagelist .pageNum").on("click",function(){            var sBtn=$(this);            target(sBtn);        });        viewArr(arr,targetnum,itemNum);    }});

感觉js部分还可以优化很多，但是水平有限，哪位写写哈！

0 0