laravel分页样式_layui分页样式

《laravel分页样式_layui分页样式》

开头简述解决方案

在Web开发中，Laravel和Layui都是非常流行的框架或组件。当需要将Layui的分页样式应用到Laravel项目中时，我们可以通过自定义Laravel分页视图或者利用JavaScript交互等方式来实现。

一、自定义Laravel分页视图

Laravel自带了强大的分页功能，但默认的分页样式可能不符合我们的需求。我们可以创建一个自定义的分页视图文件，在resources/views/vendor/pagination下新建一个名为layui.blade.php的文件。
```php

layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;

//完整功能
laypage.render({
elem: 'layui-demo'
,count: {{ $paginator->total() }} //数据总数
,limit:{{ $paginator->perPage() }}
,curr:{{ $paginator->currentPage() }}
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function(obj, first){
if(!first){
window.location.href = "?page="+obj.curr+"&per_page="+obj.limit;
}
}
});
});

然后在控制器获取数据进行分页时指定使用这个分页器：php
$paginator = Model::paginate(10,['*'],['page' => $request->input('page'),'perpage'=>$request->input('perpage')]);
return view('yourview',compact('paginator'))->with('pagination',$paginator->appends($request->except('page'))->links('vendor.pagination.layui'));
```

二、通过JavaScript操作Laravel分页链接并套用Layui样式

如果不想自定义分页视图，也可以直接获取Laravel生成的分页HTML元素，再通过JavaScript将其转换成Layui分页样式。
```html

{!! $paginator->links() !!}

// 等待页面加载完成
document.addEventListener("DOMContentLoaded", function(event) {
var paginationContainer = document.querySelector('.pagination');
// 将Laravel分页内容隐藏
paginationContainer.style.display = 'none';

// 创建一个新的容器用于显示Layui分页
var newPaginationContainer = document.createElement('div');
newPaginationContainer.id = 'layui-custom-pagination';
document.body.appendChild(newPaginationContainer);

// 使用Layui分页渲染
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;

laypage.render({
elem: 'layui-custom-pagination'
,count: parseInt(paginationContainer.querySelector('.pagination').getAttribute('data-total')) //解析出总条数等信息
//其他配置项类似上面方法
});
});
});

```
以上两种思路都可以实现Laravel分页结合Layui分页样式的效果，可以根据实际项目情况选择合适的方式。