laravel怎么使用ajax分页(laravel异步获取数据)

发布时间:2019-05-15 编辑:小张个人博客 查看次数:15181

html部分:

 <div class="page">
         <!-------分页---------->
           @if($data['count'] > 5)
               <ul class="pagination">
                   @if($data['page'] !=1)
                       <li>
                           <a href="javascript:void(0)" onclick="page({{$data['prev']}})"><<</a>
                       </li>
                   @endif
                   @foreach($data['pages'] as $k=>$v)
                       @if($v == $data['page'])
                           <li class="active"><span>{{$v}}</span></li>
                       @else
                           <li >
                               <a href="javascript:void(0)" onclick="page({{$v}})">{{$v}}</a>
                           </li>
                       @endif

                   @endforeach

                   <li>
                       <a href="javascript:void(0)" onclick="page({{$data['next']}})">>></a>
                   </li>

               </ul>
           @endif

       <!-------分页---------->

分页CSS样式:

 <style>
    .page{ margin:20px 0 0 0; text-align:center; width:100%; overflow: hidden;}
    .page ul{}
    .page ul li{display: inline-block; margin:0; float:left;}
    .page ul li span,.page ul li a{margin: 0 2px;height: 26px;line-height: 26px;border-radius: 50%;width: 26px;text-align: center;display: inline-block;}
    .page ul li a {margin: 0 2px;height: 26px;line-height: 26px; border-radius: 50%;width: 26px;text-align: center;display: inline-block;}
    .page ul li.active span,.page ul li a:hover{background: #333;color: #FFF;}
    .page ul li.disabled span{background: #CCC; color: #FFF;}
    .page ul li a{color: #F33;border: #999 1px solid;}
  </style>

ajax异步请求:

<script>
      function page(page){
          //加载层
          layer.msg('数据加载中', {
              icon: 16,
              time: 1500,
              shade: 0.01
          });
          // 发异步请求完成分页
          $.ajax({
              type: "POST",
              url: '{{url('pages')}}',
              dataType: 'json',
              cache: false,
              data: { page: page, _token: "{{csrf_token()}}"},
              success: function(msg) {
                  if(msg){
                      $('.bloglist').html(msg);
                  }
              }
          });

      }
    </script>


Laravel自定义逻辑部分:

  public function page(Request $request,$num){

        $page = $request->input('page', ''); // 获取当前页数
        if(empty($page)) {
            $page = 1;
        }
        $count = Article::select('title')->count();  // 查询数据总条数
        $rev = $num; // 每页显示条数
        $sums = ceil($count / $rev); // 求总页数
        $pages = array();  // 页数
        for ($i = 1; $i <= $sums; $i++) {
            $pages[$i] = $i;
        }
        $prev = ($page - 1) > 0 ? $page - 1 : 1; // 设置上一页
        $next = ($page + 1) < $sums ? $page + 1 : $sums; // 设置下一页
        $offset = ($page - 1) * $rev; // 求偏移量
        $data = Article::where('display', 0)->orderBy('time', 'desc')->skip($offset)->take($rev)->get();  // 跟据条件查询数据   
        return array(
            'data' => $data,
            'prev' => $prev,
            'next' => $next,
            'page' => $page,
            'pages' => $pages,
            'sums' => $sums,
            'count' => $count
        );
    }

 Laravel异步分页请求,组织好内容返回给前端

 // 分页请求
    public function getPage(Request $request){

        $data = $this -> page($request,5);   // 调分页方法每页显示 5条数据
        $page = $request ->input('page','');
        $res = '';
       foreach($data['data'] as $val){
           $res .= '<h3>'.$val->title.'</h3>';
           $res .='<figure><img src="'.url($val->thumb).'"></figure>';
           $res .='<ul>';
           $res .='<p>'.$val ->desciption.'</p>';
           $res .='<a title="'.$val->title.'" href="'.url('Article/'.$val->aid).'" target="_blank" class="readmore">阅读全文>></a>';
           $res .='</ul>';
           $res .='<p class="dateview"><span>'.date("Y-m-d",$val->time).'</span><span>作者:'.$val->editor.'</span></p>';
       }
       $res .='<div class="page">';
       $res .='<!-------分页---------->' ;
        if($data['count'] > 5){
            $res .= '<ul class="pagination">';
            if($page != 1){
                $res .='<li >';
                $res .='<a href="javascript:void(0)" onclick="page('.$data['prev'].')"><<</a>';
                $res .='</li>';
            }
            foreach($data['pages'] as $k=>$v){
                if($v == $data['page']){
                    $res .='<li class="active"><span>'.$v.'</span></li>';

                }else{
                    $res .='<li >' ;
                    $res .='<a href="javascript:void(0)" onclick="page('.$v.')">'.$v.'</a>' ;
                    $res .='</li>' ;
                }

            }
            if($page != $data['sums']){
                $res .= '<li>';
                $res .= "<a href='javascript:void(0)' onclick='page(".$data['next'].")'>>></a>" ;
                $res .= '</li>';
            }
            $res .='</ul>';
        }
       return json_encode($res);


    }

效果如下:

laravel异步分页效果图

出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号