码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-24 23:49:22      阅读:504      评论:0      收藏:0      [点我收藏+]

标签:class   密码   styles   dev   url   put   ini   upd   list   

 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("数据: \n" + data + "\n状态: " + status);
                $("body").html(data);
            });
    }
</script>
</body>
</html>

 

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

标签:class   密码   styles   dev   url   put   ini   upd   list   

原文地址:https://www.cnblogs.com/hopelooking/p/9222122.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!