美文网首页
laravel 分页 使用layui样式

laravel 分页 使用layui样式

作者: riyihu | 来源:发表于2018-12-19 14:50 被阅读0次

laravel分页自带的事bootsharp的分页样式
个人更喜欢layui的分页样式,下面介绍如何在laravel中使用layui分页
首先得下载layui

#数据 用户列表
public function userList(Request $request){
        $txt = $request->input('searchu');
        $perPage = $request->input('per_num',20); //每页页码
        $query = UserModel::query()->orderBy('created_at', 'desc');
        $result = $query->paginate($perPage);
        $paginator = $result->render();
        $result =  collect($result)->toArray();

        $users = $result['data'];
        $total = $result['total'];//总页码
        $current_page = $result['current_page'];//当前页
        return view('admin.user.userList',compact('users','paginator' ,'total','current_page','perPage'));
        
    }
#页面html
<link rel="stylesheet" href="{{ asset('layui/css/layui.css') }}" media="all">
<script src="{{ asset('layui/layui.js') }}"></script>
.............
<tbody>
        @if(!empty($users))
          @foreach($users as $user)
          <tr>
            <td data-id="{{$user['id']}}" onclick="lookforOrder(this)">{{$user['username']}}</td>
            ........
          </tr>
          @endforeach
        @else
          <tr><td colspan="8" style="text-align:center;">- -- >暂无数据< -- -</td></tr>
        @endif
      </tbody>
    </table>
    <div id="userPage" style="float: right">
         {{ $paginator }}  //分页
    </div>
  </div>

js

#js
<script>
  layui.use(['element', 'layer','laypage'], function(){
    var element = layui.element;
    var layer = layui.layer;
    var laypage = layui.laypage;
    $ = layui.jquery;

    var count = "{{$total}}";
    var cur_page = "{{$current_page}}";
    var limit = "{{$perPage}}";
    var txt = "{{$txt}}";
    laypage.render({
        elem: 'userPage'
        ,curr:cur_page
        ,count: count
        ,limit:limit
        ,txt:txt
        ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
        ,jump: function(obj,first){
          // console.log(obj)
         //url =window.location.href;
            url = window.location.pathname;//当前页url不带参
            var params = {page:obj.curr, per_num:obj.limit};
            if(!empty(txt)){
                params['searchq']=txt; //这个是搜索 参数
            }
            url = http_build_query(url, params);
         if(!first){  //跳转必须放在这个里边,不然无限刷新
           window.location.href= url; //跳转
         }
        }
    });

  });
</script>

OK

相关文章

网友评论

      本文标题:laravel 分页 使用layui样式

      本文链接:https://www.haomeiwen.com/subject/pmrjkqtx.html