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>
网友评论