tp5中ajax的搜索分页功能

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属性-->
      &emsp;<span class="span">{$item}</span>
    {/foreach}
  </div>

  (3).如下图

tp5中ajax的搜索分页功能

2.进行无刷新分页和搜索操作

  (1).先写一个搜索框和按钮(注:表单按钮的class属性值与页码一致)
    <form>
      <input type="text" placeholder="请输入商品名称" class="input">
      <button type="button" class="span">搜索</button>
    </form>

    tp5中ajax的搜索分页功能
  (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>&emsp;<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.效果如下(由于本人太懒,搜索后分页的页码没有做,但搜索后分页的效果依旧存在,只是页码还是一开始的数量)

tp5中ajax的搜索分页功能

上一篇:Google Pay 订单验证


下一篇:实现抽象类之方式二