Laravel学习笔记基础系列--(二十三)Laravel 自定义分页

作者：温新

时间：2021-06-29

hi，我是温新，一名PHPer

取出来的数据太多，不可能让所有的数据都显示在一个页面了，那么数据分页就来了。在Laravel中，使用分页十分的简单，只需要调用查询构建器的paginate方法即可。

方法：paginate(每页显示的数据量)

准备工作

在演示之前，我们需要创建一个视图页面。

1）修改控制器

// DemoController.php
public function demo()
{
    return view('demo.demo');
}

2）增加demo空视图文件

resources/views/demo/demo.blade.php

基础分页

第一步：数据分页

// DemoController.php
public function demo()
{
    $posts = DB::table('posts')->paginate(10);
    return view('demo.demo', compact('posts'));
}

这就这样的简单，分布完成了。

第二步：demo视图文件显示

// demo.blade.php
{{$posts->links()}}

关于样式问题，暂且忽略，后面使用自定义分页时会做更改。

简单分页

简单分页只需要使用simplePaginate方法即可。

$posts = DB::table('posts')->simplePaginate(10)

自定义页面

关于自定义分页，这里使用bootstrap样式。

第一步：导出自定义分页文件

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

该命令将生成的相关文件到在resources/views/vendor/pagination目录下，默认使用的是tailwind.blade.php，这里我们需要改成使用bootstrap。

第二步：使用bootstrap样式

// app/Providers/AppServiceProvider.php

public function boot()
{
    // 使用bootstrap4样式
    Paginator::useBootstrap();
}

此时，使用的分页样式文件为resources/views/vendor/pagination/bootstrap-4.blade.php

第三步（方式一）：简单暴力，使用样式

为了方便，这里直接使用CDN方式，简单粗暴有效的使用。

// demo.blade.php
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
{{ $posts->links() }}

第三步（方式二）：使用laravel/ui集成的bootstrap样式

使用laravel/ui属性前端开发范畴，这里不进行演示。后续会详细想到关于Laravel的前端开发。

第四步：把 > < 修改为上一页、下一页

文件位置：resources/views/vendor/pagination/bootstrap-4.blade.php

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">上一页</a>
                </li>
            @endif

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <li class="page-item disabled" aria-disabled="true"><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" aria-current="page"><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" aria-label="@lang('pagination.next')">下一页</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

关于这个页面，可以根据自己的需要自定义。

我是温新

每天进步一点点，就一点点