tp5.0手写ajax列表分页

1:视图层

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<style>
    #pageBar {
        text-align: right;
        padding: 0 20px 20px 0;
    }

    .pageBtn a {
        display: inline-block;
        border: 1px solid #aaa;
        padding: 2px 5px;
        margin: 0 3px;
        font-size: 13px;
        background: #ECECEC;
        color: black;
        text-decoration: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 3px;
    }

    .pageBtn-selected a {
        display: inline-block;
        border: 1px solid #aaa;
        padding: 2px 5px;
        margin: 0 3px;
        font-size: 13px;
        background: #187BBD;
        color: white;
        text-decoration: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 3px;
    }

    .pageBtn a:hover {
        background: #187BBD;
        color: white;
    }
</style>

<!--商品列表开始-->
<div class="jumbotron">

    <div id="data-area">
        <!--这里添加分页数据-->  <ul>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</ul>
    </div>
    <div id="pageBar"><!--这里添加分页按钮栏--></div>

<!--商品列表开始-->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var curPage;        //当前页数
    var totalItem;      //总记录数
    var pageSize;       //每一页记录数
    var totalPage;      //总页数
    //获取分页数据
    function turnPage(page) {
        $.ajax({
            type: 'get',
            url: 'goods',     //这里是请求的后台地址，自己定义
            data: {'curPage': page},
            dataType: 'json',
            beforeSend: function () {
                $("#data-area ul").append("加载中...");
            },
            success: function (data) {
                $("#data-area ul").empty();       //移除原来的分页数据
                totalItem = data.data.totalItem; // 返回的总记录数
                pageSize = data.data.pageSize; //返回的每一页记录数
                curPage = page; //返回的当前页码
                totalPage = data.data.totalPage; //返回的总页数
                var data_content = data.data.data_content; //返回的数据内容
                var data_html = ""; //数据输出的html代码
                //添加新的分页数据（数据的显示样式根据自己页面来设置，这里只是一个简单的列表）
                $.each(data_content, function (index, array) {
                    data_html += "<li style='list-style-type:none;'>" + "<input name='checkbox' type='checkbox' value="+array['id']+" />"+array['id'] + "&nbsp;" + array['title'] + "&nbsp;" + array['zk_final_price']  +"<img src="+ array['pict_url'] +" style='width:50px;height:50px;'/>"+ "</li>";

                }); //遍历数据，形成html代码
                $("#data-area ul").append(data_html); //输出html代码
                getPageBar();
            },
            /*            complete: function() {    //添加分页按钮栏
                           getPageBar();
                        },*/
            error: function () {
                alert("数据加载失败");
            }
        });
    }
    /*    curPage;    //当前页数
          totalItem;  //总记录数
          pageSize;   //每一页记录数
          totalPage;  //总页数
        */
    //获取分页条（分页按钮栏的规则和样式根据自己的需要来设置）
    function getPageBar() {
        //防止数据错误时候出现当前页数大于总页数
        if (curPage > totalPage) {
            curPage = totalPage;
        }
        //防止数据错误时候出现当前页数小于第一页
        if (curPage < 1) {
            curPage = 1;
        }
        //定义分页按钮html代码
        pageBar = "";

        //如果不是第一页
        if (curPage != 1) {
            pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首页</a></span>";
            pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'>上一页</a></span>";
        }

        //显示的页码按钮(5个)

        //定义start 和end两个变量准备循环输出可见的分页按钮
        var start, end;
        if (totalPage <= 5) {
            start = 1;
            end = totalPage;
        } else {
            //当前页码与总页数相差1个的时候，要显示之前的页码
            if (totalPage - curPage < 2) {
                start = totalPage - 4;
                end = totalPage;
            } else {
                //显示前面两个和后面两个
                start = curPage - 2;
                end = curPage + 2;
            }
        }
        //如果不是最后页,显示输出“下一页 ， 末页”

        if (curPage != totalPage) {
            pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + (parseInt(curPage) + 1) + ")'>下一页</a></span>";
            pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + totalPage + ")'>末页</a></span>";
        }
        //匹配改变pageBar里面的内容
        $("#pageBar").html(pageBar);
    }

    //页面加载时初始化分页
    $(function () {
        turnPage(1);
    });

</script>

2:控制器里

public function goods(){
    if(request()->isAjax()){
        //1.获取数据（curPage）
        $page=input('get.');
        $curPage = $page['curPage'];
        //2.定义分页所需的数据
        $totalItem = Tbgoods::count();   //总记录数(自行定义)
        $pageSize='10';  //每一页记录数(自行定义)
        $totalPage =ceil($totalItem/$pageSize);  //总页数
        $startItem = ($curPage-1) * $pageSize;//根据页码来决定查询数据的节点
        //3.查询数据
        $res=Tbgoods::limit($startItem,$pageSize)
            ->select();
        //4.放入所有数据
        $arr['totalItem']=$totalItem;
        $arr['pageSize']=$pageSize;
        $arr['totalPage']=$totalPage;
        foreach($res as $lab) {
            $arr['data_content'][] = $lab;
        }
        //5.结果返回（此处没有判定是否查询成功）
        $this->result($arr,'1','成功','json');
    }
}

tp5.0手写ajax列表分页

猜你喜欢