tp5+jquery实现js中的for循环分页
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 >
<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" value="张三"><input type="button" value="搜索" >
<table class="table table-bordered">
<tr>
<th>选中</th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>地址</th>
<th>手机</th>
<th>操作</th>
</tr>
<tbody >
{volist name="list.data" }
<tr >
<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')}?>删除</a>
<a href="{:url('Login/updpage')}?>修改</a>
</td>
</tr>
{/volist}
</tbody>
</table>
<!--当前页-->
<input type="hidden" name="current_page" value="1">
<!--尾页-->
<input type="hidden" name="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 +arr[i]['id']+"'>";
str += "<td><input type='checkbox' name='check' +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']+"'>删除</a> || <a href='{:url('Login/updpage')}?id']+"'>删除</a></td>";
str += "</tr>";
}
//带结构替换数据
$("#tb").html(str);
//替换当前页的值
$("#current_page").val(pv);
})
});
</script>
</body>
</html>