laravel 自定义分页样式「建议收藏」

全栈程序员站长

发布于 2022-09-09 14:46:43

1K0

发布于 2022-09-09 14:46:43

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

文章目的实现laravel分页样式的修改：（样式有点丑）

以laravel的默认表users表为例，插入100条数据

$arr = [];
for($i=0;$i<100;$i++){
        $arr[] = ['name'=>'NAME_'.$i,'email'=>"email@{$i}.com",'password'=>$i,'created_at'=>date('Y-m-d H:i:s'),'updated_at'=>date('Y-m-d H:i:s')];
    }
    DB::table('users')->insert($arr);

查询数据渲染到模板

public function test(){
        $users = DB::table('users')->paginate(10);
        return view('paginate',['users'=>$users]);
    }

新建paginate.blade.php文件

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
        table td,th {
            border: 1px solid #e5e5e5;
            padding: 8px;
        }
        .table{
            width: 100%;
            margin-left: 20%;
        }
    </style>
</head>
<body>

<div >
    <div class="table">
        <h1>用户列表</h1>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>email</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                </tr>
            </thead>
            <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{
  
  {$loop->iteration}}</td>
                    <td>{
  
  {$user->name}}</td>
                    <td>{
  
  {$user->email}}</td>
                    <td>{
  
  {$user->created_at}}</td>
                    <td>{
  
  {$user->updated_at}}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
        {
  
  {$users -> links()}}

    </div>
</div>

</body>
</html>

此时的分页为laravel默认的效果

使用 vendor:publish 命令导出视图文件到resources/views/vendor 目录

php artisan vendor:publish --tag=laravel-pagination

生成多种分页样式模板文件

此时默认使用pagination文件的第一个分页样式 bootstrap-4.blade.php Paginator::defaultView(‘vendor.pagination.default’); 可以切换其他的样式

修改箭头符号为上一页

修改后效果：

加一个跳转页数的输入框

分页blade的代码：

<style>
    .pagination select {
        width: 110px;
        margin-top: -24px;
    }
    .pagination li{
        display: inline-block;
    }
    .pagination input{
        width: 50px;
    }
</style>

@if ($paginator->hasPages())

    <ul class="pagination">

        {
  
  {--添加分页数量选择--}}
        <li class="page-item">
            <select class="form-control" name="perPage" >
                <option value="10" selected>10条/页</option>
                <option value="20" selected>20条/页</option>
                <option value="50" selected>50条/页</option>
                <option value="100" selected>100条/页</option>
            </select>
        </li>

        {
  
  {-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            {
  
  {--<li class="page-item disabled"><span class="page-link">&lsaquo;</span></li>--}}
            <li class="page-item disabled"><span class="page-link">上一页</span></li>
        @else
            {
  
  {--<li class="page-item"><a class="page-link" href="{
  
  { $paginator->previousPageUrl() }}" rel="prev">&lsaquo;</a></li>--}}
            <li class="page-item"><a class="page-link" href="{
  
  { $paginator->previousPageUrl() }}" rel="prev">上一页</a></li>
        @endif

        {
  
  {-- Pagination Elements --}}
        @foreach ($elements as $element)
            {
  
  {-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li class="page-item disabled"><span class="page-link">{
  
  { $element }}</span></li>
            @endif

            {
  
  {-- Array Of Links --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li class="page-item active"><span class="page-link">{
  
  { $page }}</span></li>
                    @else
                        <li class="page-item"><a class="page-link" href="{
  
  { $url }}">{
  
  { $page }}</a></li>
                    @endif
                @endforeach
            @endif
        @endforeach

        {
  
  {-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            {
  
  {--<li class="page-item"><a class="page-link" href="{
  
  { $paginator->nextPageUrl() }}" rel="next">&rsaquo;</a></li>--}}
            <li class="page-item"><a class="page-link" href="{
  
  { $paginator->nextPageUrl() }}" rel="next">下一页</a></li>
        @else
            {
  
  {--<li class="page-item disabled"><span class="page-link">&rsaquo;</span></li>--}}
            <li class="page-item disabled"><span class="page-link">下一页</span></li>
        @endif

        <li>
            <strong> 跳转到：</strong>
        </li>
        <li>
            <input class="form-control">
        </li>
        <li>
            <strong> 页</strong>
        </li>
    </ul>
@endif

附：每个分页器实例都可以通过以下方法提供更多分页信息：

$results->count()
$results->currentPage()
$results->firstItem()
$results->hasMorePages()
$results->lastItem()
$results->lastPage() (使用simplePaginate 时无效)
$results->nextPageUrl()
$results->perPage()
$results->previousPageUrl()
$results->total() (使用simplePaginate 时无效)
$results->url($page)

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/160649.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

laravel