0
点赞
收藏
分享

微信扫一扫

Ajax实现分页

代码敲到深夜 2022-03-31 阅读 67
eclipse

     <!-- 引入jQuery的类库 -->
    <script type="text/javascript" scr="js/jquery-3.3.1.js"></script>
    <!-- 另起一个script块 -->
    <script type="text/javascript">
    //页面载入函数
    $(function(){
        //默认显示第1页
        myf('a');
    })
    //扩大作用域
    var pageIndex;
    var max;
    //写一个方法专门控制分页
    function myf(type){
        if(type=='a'){
            //首页
            pageIndex=1;
        }
        else if(type=='b'){
            //上一页
            if(pageIndex>1){
                pageIndex--;
            }
            else{
                alert("兄die,已经是第一页了嘞");
            }
        }
        else if(type=='c'){
            //下一页
            if(pageIndex<max){
                pageIndex++;
            }
            else{
                alert("兄die,已经是最后一页了嘞");
            }
        }
        else{
            //末页
            pageIndex=max;
        }
        //ajax
        $.post("page.do", {pid:pageIndex}, function(data) {
            //用*分割
            var x=data.split("*");
            //x[0]代表json格式的对象数组字符串
            //x[1]代表max值 
            //将json格式的对象数组字符串-->js的对象数组
            var ss=$.parseJSON(x[0]);
            //给max赋值
            max=parseInt(x[1]);
            var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
            //循环遍历
            $.each(ss, function(i, g) {//下标,元素=对象
                sb+="<tr align='center'>";
                sb+="<td>"+g.gid+"</td>";
                sb+="<td>"+g.gname+"</td>";
                sb+="<td><img src='"+g.gpath+"'/></td>";
                sb+="</tr>";
            })
            sb+="</table>";
            sb+="["+pageIndex+"/"+max+"]";
            //给div赋值
            $("#aa").html(sb);
        })
    }
</script>

举报

相关推荐

0 条评论