tp5+jquery通过模板页面替换的方式实现分页

Posted hopelooking

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tp5+jquery通过模板页面替换的方式实现分页相关的知识，希望对你有一定的参考价值。

 php页面的方法

//jquery分页
    public function jqpage(){
        //接收当前页
        $p = Request::instance()->param(‘page‘);
        $page = empty($p)?1:$p;
        //求出总条数
        $count = Db::table(‘user‘)->count();
        //设置每页显示条数
        $length = 3;
        //求出总页数
        $num_page = ceil($count/$length);
        //设置偏移量
        $limit = ($page-1)*$length;
        //查询
        $data = Db::table(‘user‘)->limit($limit,$length)->select();
        //判断当前页拼接数组
        $arr[‘data‘] = $data;
        $arr[‘home_page‘] = 1;  //首页
        $arr[‘prev_page‘] = $page-1<=1 ? 1 : $page-1;  //上一页
        $arr[‘next_page‘] = $page+1>=$num_page ? $num_page : $page+1;  //下一页
        $arr[‘last_page‘] = $num_page;
        return view(‘jqpage‘,[‘list‘=>$arr],[‘__CSS__‘=>‘/static‘,‘__JS__‘=>‘/static‘]);
    }

 

 

html页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="__CSS__/css/bootstrap.css">
    <title>JQ分页</title>
</head>
<body>
<table class="table table-bordered">
    <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>地址</th>
        <th>手机</th>
        <th>操作</th>
    </tr>
    {volist name="list.data" id="vo"}
    <tr>
        <td>{$vo.id}</td>
        <td>{$vo.uname}</td>
        <td>{$vo.pwd}</td>
        <td>{$vo.area}</td>
        <td>{$vo.phone}</td>
        <td>
            <a href="{:url(‘Login/deldata‘)}?id={$vo.id}">删除</a>
            <a href="{:url(‘Login/updpage‘)}?id={$vo.id}">修改</a>
        </td>
    </tr>
    {/volist}
</table>

<input type="hidden" name="p" id="p" value="1">
<a href="javascript:void(0);" onclick="page({$list.home_page})">首页</a>
<a href="javascript:void(0);" onclick="page({$list.prev_page})">上一页</a>
<a href="javascript:void(0);" onclick="page({$list.next_page})">下一页</a>
<a href="javascript:void(0);" onclick="page({$list.last_page})">尾页</a>

<script src="__JS__/js/jquery.js"></script>
<script>
    function page(obj) {
        $.get("{:url(‘Login/jqpage‘)}?page="+obj,
            function(data,status){
                // console.log("数据: 
" + data + "
状态: " + status);
                $("body").html(data);
            });
    }
</script>
</body>
</html>

 

以上是关于tp5+jquery通过模板页面替换的方式实现分页的主要内容，如果未能解决你的问题，请参考以下文章

tp5的ajax分页实现

jQuery页面替换+php代码实现搜索后分页

如何使用 jQuery 和 Django 分页附加数据页面？

TP5模板输出替换

TP5分页类

TP5分页类