laravel自定义分页

水深无声 2022-04-12 11:16 377阅读 0赞

本篇博客将给大家讲述如何修改博客的分页样式，这是博主前几天再修改界面分页样式所遇到的问题。

博主也是先百度，但是网络上的答案也是层出不穷,很多人其实都没实践过，而是随便贴代码就这样，在这里我真的要吐槽一下，好了进入正轨。

我们先新建一个页面，在resources/views/home/partials中建一个页面(由于我的前端页面是放在home文件夹中,看个人情况存放),我自己命名的的文件名为paginator.blade.php。建完这个页面之后，我们在根目录中的vendor/laravel/framework/src/Illuminate/Pagination/resources/view看到有4个文件,我们打开default.blade.php,并复制代码到我们前面创建的页面中,代码如下：

@if ($paginator->hasPages())
        {
       {-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
         «        
        @else
         previousPageUrl() }}" rel="prev" _href="{
       { $paginator->previousPageUrl() }}">
         «        
        @endif
        {
       {-- Pagination Elements --}}
        @foreach ($elements as $element)
           {
       {-- "Three Dots" Separator --}}
           @if (is_string($element))
               {
       { $element }}            
           @endif
           {
       {-- Array Of Links --}}
           @if (is_array($element))
               @foreach ($element as $page => $url)
                   @if ($page == $paginator->currentPage())
                      {
       { $page }}                   
                   @else
                      {
       { $page }}                    
                   @endif
               @endforeach
            @endif
        @endforeach
        {
       {-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            nextPageUrl() }}" rel="next" _href="{
       { $paginator->nextPageUrl() }}"> 
            »        
        @else
            »        
        @endif
    @endif

然后我们开始根据样式修改里面的类，这个看个人需求，下面我就贴出我的分页样式代码，供大家参考，代码如下：

.paginator-content {
        padding: 1rem;
        margin: 3rem auto;
        border-radius: 0.2rem;
        counter-reset: pagination;
        text-align: center;
    }
    
    .paginator-content ul {
        width: 100%;
    }
    
    .paginator-content ul {
        list-style: none;
        display: inline;
        padding-left: 0px;
    }
    
    .paginator-content li {
        border: solid 1px #d6d6d6;
        border-radius: 0.2rem;
        color: #7d7d7d;
        text-decoration: none;
        text-transform: uppercase;
        display: inline-block;
        text-align: center;
        padding: 0.5rem 0.9rem;
    }

写完以上代码样式后，接下来就是重要的一部,在用到分页的页面中，我们通常都是以

{
       { $blog->links() }}

这个是默认的分页样式，接下来我们就把他改成我们自己写的分页样式，代码如下：

{
       { $blog->links('home.partials.paginator') }}

好了，这样就成功使用自定义分页样式了。

这期就给大家讲到这里，下期我们继续。

更多文章请关注微信公众号

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haWDE5OTQxMDE4_size_16_color_FFFFFF_t_70]: /images/20220412/5723003764874bc3abd716dd70db1433.png