Think PHP 5 利用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.效果如下（由于本人太懒，搜索后分页的页码没有做，但搜索后分页的效果依旧存在，只是页码还是一开始的数量）