PHP TP5 利用jQuery实现无刷新分页与无刷新搜索
1.先将数据完整展示出来
(1)后台代码
public function GoodsShow(){ //每页显示数量 $size=5; $model=new \app\test\model\Goods(); $data=$model->join('type','t_id=type_id')->select(); $data=collection($data)->toArray(); //计算一共有多少数据 $count=count($data); //向上取整，计算总页数 $p=ceil($count/$size); //定义空数组，用于放置页码 $res=[]; //循环总页数，并将页码放入空数组中 for($i=1;$i<=$p;$i++){ $res[]=$i; } //因为是第一页展示，所以我们直接利用limit截取前五条数据 $data=$model->join('type','t_id=type_id')->limit($size)->select(); //返回页面以及数据和页码 return view('./goodsShow',compact('data','res')); }
(2)前台代码
<!--展示用表格来展示数据，这里利用Bootstrap4来美化页面--> <table class="table"> <tr align="center"> <th> <input type="checkbox"> </th> <th>商品ID</th> <th>商品logo</th> <th>商品名称</th> <th>商品分类</th> <th>添加时间</th> <th>商品状态</th> <th>操作</th> </tr> <!-- 前五条数据利用volist来循环出来--> {volist name="data" id="vo"} <tr align="center" class="tr"> <td> <input type="checkbox"> </td> <td class="id">{$vo.goods_id}</td> <td> <img src="http://127.0.0.1/test/public{$vo.goods_logo}" alt=""> </td> <td>{$vo.goods_name}</td> <td>{$vo.type_name}</td> <td>{$vo.create_time}</td> {if $vo.goods_statu==1} <td class="statu">推荐</td> {else} <td class="statu">不推荐</td> {/if} <td> <button type="button" class="btn btn-outline-info">修改</button> <button type="button" class="btn btn-outline-danger">删除</button> </td> </tr> {/volist} </table> <div style="width: 100%;text-align: center"> <!-- 页码利用foreach来遍历输出--> {foreach $res as $item} <!-- 给每一个页码都付一个class属性-->  <span class="span">{$item}</span> {/foreach} </div>
(3).如下图
2.进行无刷新分页和搜索操作
(1).先写一个搜索框和按钮（注：表单按钮的class属性值与页码一致）
<form> <input type="text" placeholder="请输入商品名称" class="input"> <button type="button" class="span">搜索</button> </form>
(2).写出jQuery
//给页码和搜索按钮一个点击事件，按钮与页码都调用这一个点击事件 $('body').on('click','.span',function () { //当点击页码时获取页码的值 var pay=$(this).text(); //获取搜索框内的值 var input=$('.input').val(); //当点击搜索的时候它会获取到"搜索"两个字，所以要判断一下是否为数字，不是的话给pay赋值1 if (isNaN(pay)){ pay=1; } //进行异步请求 $.ajax({ //请求地址 url:"{:url('test/Seek/fen')}", //请求值 data:{pay:pay,input:input}, //请求方式 type:'post', //成功后回调函数 success:function (res) { var tr=''; //表格表头 tr+="<tr align=\"center\"><th><input type=\"checkbox\"></th><th>商品ID</th><th>商品logo</th><th>商品名称</th><th>商品分类</th><th>添加时间</th><th>商品状态</th><th>操作</th></tr>"; //将查询到的数据循环拼接到一起 $.each(res.data,function (k,v) { tr+="<tr align='center' class='tr'>"; tr+="<td><input type=\"checkbox\"></td>"; tr+="<td class='id'>"+v.goods_id+"</td>"; tr+="<td><img src='http://127.0.0.1/test/public"+v.goods_logo+"' alt=''></td>"; tr+="<td>"+v.goods_name+"</td>"; tr+="<td>"+v.type_name+"</td>"; tr+="<td>"+v.create_time+"</td>"; if (v.goods_statu==1){ tr+="<td class=\"statu\">推荐</td>"; }else{ tr+="<td class=\"statu\">不推荐</td>"; } tr+="<td><button type=\"button\" class=\"btn btn-outline-info\">修改</button> <button type=\"button\" class=\"btn btn-outline-danger\">删除</button></td>"; tr+="</tr>"; }) //将拼接好的tr赋给table表格，替换掉之前的数据 $('table').html(tr); } }) })
(3).写后台代码
public function fen(){ //获取pyg $pay=Request::instance()->param('pay'); //获取表单中的值 $input=Request::instance()->param('input'); //空数组，用于条件查询 $where=[]; //判断表单内容，如果有就放入where数组中 if ($input){ //此数组为模糊查询 $where['goods_name']=['like',"%$input%"]; } //因为截取是从数据下标开始，所以要将页码-1 $pay=$pay-1; //每页数量 $size=5; $model=new \app\test\model\Goods(); //查询数据 $pay*$size为截取数据开始的下标 $size为截取长度 $data=$model->join('type','t_id=type_id')->where($where)->limit($pay*$size,$size)->select(); $data=collection($data)->toArray(); //返回数据 return json(['code'=>0,'data'=>$data,'msg'=>'']); }
3.效果如下（由于本人太懒，搜索后分页的页码没有做，但搜索后分页的效果依旧存在，只是页码还是一开始的数量）
