tp5-- 分页异步刷新

<?php

namespace app\index\controller;

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>

tp5-- 分页 异步刷新

猜你喜欢

tp5-- 分页异步刷新