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