Laravel5+jQuery实现AJAX分页(laravel5自定义分页样式)

发布时间:2017-04-21 编辑:小张个人博客 查看次数:3296

主要介绍了Laravel5+jQuery实现AJAX分页效果的方法,简单介绍了jQuery的ajax调用结合Laravel控制器实现无刷新分页功能的相关操作技巧,需要的朋友可以参考下。Laravel5分页器生成的HTML兼容Bootstrap CSS 框架。

本文实例讲述了Laravel+jQuery实现AJAX分页效果。分享给大家供大家参考,具体如下:

JavaScript部分:

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

Laravel控制器部分:

// 分页请求
public function getPage(Request $request){
    $data = $this -> page($request,2); //调用分页方法
    $page = $request ->input('page',''); // 接收当前请求的分页码
    //自定义样式和数据返回给前端
   $res = '';
   $res .= ' <ul class="media-list">';
   foreach($data['data'] as $val) {
       $res .= '<li class="media">';
       $res .= '<a class="pull-left" title="' . $val->title . '" href="' . url('Article/' . $val->aid) . '" >';
       $res .= '<img class="img-responsive img-thumbnail" src="' . url($val->thumb) . '" alt="' . $val->title . '" style="height: 123px;width: 185px;" >';
       $res .= '</a>';
       $res .= '<h4 class="media-heading">';
       $res .= '<a class="a-color" href="' . url('Article/' . $val->aid) . '" title="' . $val->title . '">' . $val->title . '</a>';
       $res .= '</h4>';
       $res .= '<p></p>';
       $res .= '<p>' . $val->desciption . '</p>';
       $res .= '</li>';
       $res .= '<li><p></p></li>';
       $res .= '<li>';
       $res .= '<ol class="breadcrumb">';
       $res .= '<li class="active"><span class="glyphicon glyphicon-time"></span>' . date('Y-m-d', $val->time) . '</li>';
       $res .= '<li class="active">作者:' . $val->editor . '</li>';
       $res .= '</ol>';
       $res .= '</li>';
    }
    $res .='<ul>';
    $res .='<nav aria-label="Page navigation"><!--分页-->';
    if($data['count'] >2){
        $res .='<ul class="pagination">';
        if($data['page'] !=1){
            $res .='<li><a href="javascript:void(0);" onclick="page(1)">首页</a></li>';
            $res .='<li>';
            $res .='<a href="javascript:void(0)" aria-label="Previous" onclick="page('.$data['prev'].')"> 上一页</a>';
            $res.='</li>';
        }
        if($page !=$data['sums']){
            $res .='<li>';
            $res .='<a href="javascript:void(0);" aria-label="Next" onclick="page('.$data['next'].')"> <span aria-hidden="true">下一页</span></a>';
            $res .='</li>';
            $res .='<li>';
            $res .='<a href="javascript:void(0);" onclick="page('.$data['sums'].')">尾页</a>';
            $res.='</li>';
        }
        $res .='<li class="active">';
        $res .='<span>共有['.$page.'/'.$data['sums'].']页</span>';
        $res .='</li>';

        $res .='</ul>';
    }
    $res .='</nav> <!--分页 end-->';
    return json_encode($res);

  // 自定义分页逻辑
  private  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
        );
    }

主要介绍了Laravel5+jQuery实现AJAX分页效果的方法,简单介绍了jQuery的ajax调用结合Laravel控制器实现无刷新分页功能的相关操作技巧,需要的朋友可以参考下

出处:小张个人博客

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

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

顶部

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

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

渝公网安备 50024102500267号