清华大学--赵志磊前后端分离，之tp模板渲染，+Ajax分页

最新推荐文章于 2022-10-25 01:29:28 发布

柔情柴少

最新推荐文章于 2022-10-25 01:29:28 发布

阅读量949

点赞数

分类专栏： HTML thinkPHP6 文章标签： ajax javascript webview

本文链接：https://blog.csdn.net/wuqingchaishao/article/details/123400874

版权

thinkPHP6 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .page-box{
            width: 100%;
            height: 100px;
            position: absolute;
            top: 600px;
            left: 300px;
        }
    </style>
</head>
<body>
<input type="hidden" class="total" value="{$news.total}">
<input type="hidden" class="per_page" value="{$news.per_page}">
<input type="hidden" class="current_page" value="{$news.current_page}">
<input type="hidden" class="last_page" value="{$news.last_page}">
    <table border="1">
        <tr>
            <th>新闻id</th>
            <th>新闻标题</th>
            <th>新闻简介</th>
            <th>新闻封面</th>
            <th>新闻作者</th>
            <th>新闻分类</th>
            <th>新闻阅读量</th>
            <th>操作</th>
        </tr>
        {foreach $news.data as $value}
        <tr>
            <td>{$value.id}</td>
            <td>{$value.title}</td>
            <td>{$value.desn}</td>
            <td>
                <img src="{$value.pic}" alt="" width="100px">
            </td>
            <td>{$value.author}</td>
            <td>{$value.cate}</td>
            <td>{$value.view}</td>
            <td>
                <a href="javascript:;">详情</a>
            </td>
        </tr>
        {/foreach}
    </table>
<div class="page-box">
    <button class="prev" pages="">上一页</button>
    <button class="next" pages="">下一页</button>
</div>
</body>
</html>

JavaScript

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    // 页面加载  调用分页方法
    $(document).ready(function () {
        page(1);
        $('.next').attr('pages',2);
        $('.prev').attr('pages',1);
    })
    // 点击分页 下一页
   $('body').delegate(".next",'click',function () {
      var next = $(this).attr('pages');
      $.ajax({
          url:"http://www.day16.com/news",
          type:"GET",
          dataType:"JSON",
          data:{
              page:next,
          },
          success:function (res) {
              let str = '';
              let data = res.data;
              for (var i in data){
                  str += "<tr>\n" +
                      "            <td>"+data[i].id+"</td>" +
                      "            <td>"+data[i].title+"</td>" +
                      "            <td>"+data[i].desn+"</td>" +
                      "            <td>" +
                      "                <img src='"+data[i].pic+"' alt=\"\" width=\"100px\">" +
                      "            </td>" +
                      "            <td>"+data[i].author+"</td>" +
                      "            <td>"+data[i].cate+"</td>" +
                      "            <td>"+data[i].view+"</td>" +
                      "            <td>" +
                      "                <a href=\"javascript:;\">详情</a>" +
                      "            </td>" +
                      "        </tr>"
              }
              $('table tr:gt(0)').remove();
              $('table').append(str);
              page(next);
          }
      })
   });
    // 点击分页  上一页
    $('body').delegate(".prev",'click',function () {
        var prev = $(this).attr('pages');
        $.ajax({
            url:"http://www.day16.com/news",
            type:"GET",
            dataType:"JSON",
            data:{
                page:prev,
            },
            success:function (res) {
                let str = '';
                let data = res.data;
                for (var i in data){
                    str += "<tr>\n" +
                        "            <td>"+data[i].id+"</td>" +
                        "            <td>"+data[i].title+"</td>" +
                        "            <td>"+data[i].desn+"</td>" +
                        "            <td>" +
                        "                <img src='"+data[i].pic+"' alt=\"\" width=\"100px\">" +
                        "            </td>" +
                        "            <td>"+data[i].author+"</td>" +
                        "            <td>"+data[i].cate+"</td>" +
                        "            <td>"+data[i].view+"</td>" +
                        "            <td>" +
                        "                <a href=\"javascript:;\">详情</a>" +
                        "            </td>" +
                        "        </tr>"
                }
                $('table tr:gt(0)').remove();
                $('table').append(str);
                page(prev);
            }
        })
    });
     // 封装分页方法
    function page(page) {
        let first = 1;
        let last = $('.last_page').val();
        if (parseInt(page)>first && parseInt(page)< last){
            var str = "<button class='prev' pages='"+parseInt(parseInt(page)-1)+"' >"+"上一页"+parseInt(parseInt(page)-1)+"</button>" +
                "<button class='next' pages='"+parseInt(parseInt(page)+1)+"'>"+"下一页"+parseInt((parseInt(page)+1))+"</button>";
            $('.page-box button').remove();
            $('.page-box').append(str);
            return false;
        }
        if (parseInt(page) == 1){
            var str = "<button class='next' pages='"+(parseInt(page)+1)+"'>下一页</button>";
            $('.page-box button').remove();
            $('.page-box').append(str);
            return false;
        }
        if (parseInt(page) == last ){
            var str = "<button class='prev' pages='"+(parseInt(page)-1)+"' >上一页</button>";
            $('.page-box button').remove();
            $('.page-box').append(str);
            return  false;
        }

    }
    // function page(page) {
    //     $('.prev').attr('pages',parseInt(page)-1);
    //     $('.next').attr('pages',parseInt(page)+1);
    // }

</script>

PHP tp6

 public static function newsList(){
        $news = \app\home\model\News::paginate(5)->toArray();
        View::assign(['news'=>$news]);
        return View::fetch('news-list');
    }
    public static function news($page){
        $news = \app\home\model\News::page($page,5)->select()->toArray();
        return json([
           'code'=>200,
           'msg'=>'获取第'.$page.'页成功',
           'data'=>$news,
        ]);
    }

就此完成完美！

注意：因为page是我们通过JavaScript渲染到HTML上，所以取到值是字符串要转化成整形

尽管！

我们没有转化成整形，可以判断，但是当点击第5页时，会判断出错，所以都要转化成整形

PHP里 +可以直接进行数字字符串和数字之间的加法运算但是JavaScript里面 + 就是拼接符号

转化成整形找这点小问题找了一节课浪费了时间，在此，写下此篇博客，希望能给学习JavaScript前端的童鞋，一个小小的帮助，解决你们宝贵的学习时间！