PHPTP5利用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)前台代码

　　　　<table class="table">
　　　　<tr align="center">
　　　　　　<th>
　　　　　　　　<input type="checkbox">
　　　　　　th>
　　　　　　<th>商品IDth>
　　　　　　<th>商品logoth>
　　　　　　<th>商品名称th>
　　　　　　<th>商品分类th>
　　　　　　<th>添加时间th>
　　　　　　<th>商品状态th>
　　　　　　<th>操作th>
　　　　tr>
　　　　
　　　　{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 $res as $item}
　　　　　　
　　　　　　 <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+="商品ID商品logo商品名称商品分类添加时间商品状态操作";
　　　　　　　　　　//将查询到的数据循环拼接到一起
　　　　　　　　　　$.each(res.data,function (k,v) {
　　　　　　　　　　　　tr+="";
　　　　　　　　　　　　tr+="";
　　　　　　　　　　　　tr+=""+v.goods_id+"";
　　　　　　　　　　　　tr+="