zoukankan      html  css  js  c++  java
  • tp5-- 分页 异步刷新

    <?php
    
    namespace appindexcontroller;
    
    class Index
    {
      public function userlist()
        {
            $list = model('User')->paginate(
                2,
                false,
                [
                    'type' => 'Bootstrap',
                    'var_page' => 'page',
                    //使用jqery 无刷新分页
                    'path' => 'javascript:AjaxPage([PAGE]);'
                ]
            );
            return view('index/userlist', ['list' => $list]);
        }
    
    
        public function ajaxList()
        {
            $page = request()->param('apage');
            if (!empty($page)) {
                $rel = model('User')->paginate(2, false, [
                    'type' => 'Bootstrap',
                    'var_page' => 'page',
                    'page' => $page,
                    'path' => 'javascript:AjaxPage([PAGE]);',
    
                ]);
                $page = $rel->render();
                $list = $rel->items();
            }
            return json(['list' => $list, 'page' => $page]);
        }
    }


    html部分
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
    <table>
    <thead>
    <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>密码</th>
    </tr>
    </thead>
    <tbody id="mylist">
    {volist name='list' id='user'}
    <tr>
    <td>{$user.id}</td>
    <td>{$user.username}</td>
    <td>{$user.password}</td>
    </tr>
    {/volist}
    </tbody>
    <div id="result">
    {$list->render()|raw}
    </div>
    
    </table>
    </body>
    </html>
    <script type="text/javascript" src="/static/js/jquery-3.4.1.js"></script>
    <script>
    var AjaxPage = function(page){
    $.ajax({
    url:'/index/index/ajaxList',
    type:'post',
    dataType:'json',
    data: {apage:page},
    success:function(data){
    $("#result").html(data.page);
    $('#mylist').empty();
    $obj='';
    for (var i=0;i<data.list.length;i++)
    {
    $obj=$obj+'<tr><td>'+data.list[i].id+'</td><td>'+data.list[i].username+'</td><td>'+data.list[i].password+'</td></tr>';
    }
    $('#mylist').append($obj);
    }
    });
    }
    
    </script>
    
    
    
     
    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    Intersection(计算几何)
    Happy Matt Friends(DP)
    Dire Wolf(区间DP)
    Black And White(DFS+剪枝)
    最大子矩阵
    Largest Rectangle in a Histogram (最大子矩阵)
    City Game(最大子矩阵)
    Zipper (DP)
    QQpet exploratory park(DP)
    C++程序设计(第4版)读书笔记_指针、数组与引用
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/12301134.html
Copyright © 2011-2022 走看看