php代码
<?php namespace app\index\controller; use think\Controller; use think\Db; use think\Request; class Test extends Controller { public function index(){ //接收当前页 $p = Request::instance()->param('page'); $page = empty($p)?1:$p; //求出总条数 $count = Db::table('user')->count(); //每页显示多少条 $length = 4; //总共多少页 $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('show',['list'=>$arr],['__JS__'=>'/static']); } public function jqpage(){ //接收当前页 $p = Request::instance()->param('page'); $page = empty($p)?1:$p; //求出总条数 $count = Db::table('user')->count(); //每页显示多少条 $length = 4; //总共多少页 $num_page = ceil($count/$length); //求出偏移量 $limit = ($page-1)*$length; //查询 $data = Db::table('user')->limit($limit,$length)->select(); echo json_encode($data); } }
静态页代码
<!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"> <title>Document</title> </head> <body> <input type="text" name="word" id="word" value="张三"><input type="button" value="搜索" id="search"> <table class="table table-bordered"> <tr> <th>选中</th> <th>ID</th> <th>用户名</th> <th>密码</th> <th>地址</th> <th>手机</th> <th>操作</th> </tr> <tbody id="tb"> {volist name="list.data" id="vo"} <tr id="{$vo.id}"> <td><input type="checkbox" name="check" value="{$vo.id}"></td> <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} </tbody> </table> <!--当前页--> <input type="hidden" name="current_page" id="current_page" value="1"> <!--尾页--> <input type="hidden" name="last_page" id="last_page" value="{$list.last_page}"> <a href="javascript:void(0);" class="page">首页</a> <a href="javascript:void(0);" class="page">上一页</a> <a href="javascript:void(0);" class="page">下一页</a> <a href="javascript:void(0);" class="page">尾页</a> <script src="__JS__/js/jquery.js"></script> <script> $(".page").click(function () { //当前页 var current_page = $("#current_page").val(); //尾页 var last_page = $("#last_page").val(); //获取标签的值 var obj = $(this).html(); //判断页码 if(obj=='首页'){ var pv = 1; }else if(obj=='上一页'){ var pv = parseInt(current_page)-1<=1 ? 1 : parseInt(current_page)-1; }else if(obj == '下一页'){ var pv = parseInt(current_page)+1 >= last_page ? last_page : parseInt(current_page)+1; }else{ var pv = last_page; } $.get("{:url('Test/jqpage')}?page="+pv,function (data,status) { var arr = JSON.parse(data); //清空 $("#tb").html(''); //拼接字符串 var str = ''; for(var i=0;i<arr.length;i++){ str += "<tr id='"+arr[i]['id']+"'>"; str += "<td><input type='checkbox' name='check' id='"+arr[i]['id']+"'></td>"; str += "<td>"+arr[i]['id']+"</td>"; str += "<td>"+arr[i]['uname']+"</td>"; str += "<td>"+arr[i]['pwd']+"</td>"; str += "<td>"+arr[i]['area']+"</td>"; str += "<td>"+arr[i]['phone']+"</td>"; str += "<td><a href='{:url('Login/deldata')}?id="+arr[i]['id']+"'>删除</a> || <a href='{:url('Login/updpage')}?id="+arr[i]['id']+"'>删除</a></td>"; str += "</tr>"; } //带结构替换数据 $("#tb").html(str); //替换当前页的值 $("#current_page").val(pv); }) }); </script> </body> </html>