标签：分页 页码 pay tr ajax tp5 type data id
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
//给页码和搜索按钮一个点击事件，按钮与页码都调用这一个点击事件
$('.span').click(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.效果如下（由于本人太懒，搜索后分页的页码没有做，但搜索后分页的效果依旧存在，只是页码还是一开始的数量）
标签：分页,页码,pay,tr,ajax,tp5,type,data,id 来源： https://www.cnblogs.com/dl1121/p/15221565.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。