How to implement custom style paging function in laravel

With the continuous development of the Laravel framework, more and more web projects are now choosing it. Of course, many developers also choose to use Laravel to develop their own websites. In daily development, for the implementation of functions, the usual approach is to first look for open source libraries or write components yourself. There are many previous experiences and summaries on the Internet. This article is one of them. It will tell you how to use it. Laravel comes with its own paging class to implement custom style paging.

Laravel’s own paging class

The Laravel framework comes with a paging library, which is very convenient to use. In the controller, we generally use the paginate() method to query data and return pagination results, while in the Blade template we can directly use the links() method to render pagination links, see The following code:

// 在控制器中查询数据并返回分页结果
$data = DB::table('table_name')->paginate(15);

// 在 Blade 模板中通过 links() 方法渲染分页链接
{{ $data->links() }}

In this way, the code completes the paging query and renders the paging link to the page. But this link style is the default. If we want to change the style, we need to customize the view.

Custom view

Let’s first understand the links() method. We can output it in the Blade template{{ $data->links () }}, the result is as follows:

<ul class="pagination">
    <li class="page-item disabled" aria-disabled="true" aria-label="&laquo; Previous">
        <span class="page-link" aria-hidden="true">&lsaquo;</span>
    </li>
    <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=2">2</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=3">3</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=4">4</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=5">5</a></li>
    <li class="page-item">
        <a class="page-link" href="http://localhost?page=2" rel="next" aria-label="Next &raquo;">&rsaquo;</a>
    </li>
</ul>

We found that the paging link rendered by the links() method by default is an unordered list, each Each item is an independent li element, where the active class represents the current page number, and the disabled class represents the unavailable page number. If we want to customize the style of pagination links, we need to override Laravel's default link rendering in the view file.

In Laravel, you can use the php artisan make:view command to generate the view file, as follows:

php artisan make:view pagination

This command will be in resources/views Create a file named pagination.blade.php in the directory. Write the following code in this file:

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang(&#39;pagination.previous&#39;)">
                    <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')">&lsaquo;</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')">&rsaquo;</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang(&#39;pagination.next&#39;)">
                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

This code is Laravel’s default paging view code. We can copy it to the pagination.blade.php file and then Make custom modifications.

Custom style

The custom style depends on the developer's own preferences. For example, we can modify the paging link to a button style:

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    @if ($paginator->onFirstPage())
        <li class="page-item disabled"><span class="page-link">上一页</span></li>
    @else
        <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}">上一页</a></li>
    @endif

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

        @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

    @if ($paginator->hasMorePages())
        <li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}">下一页</a></li>
    @else
        <li class="page-item disabled"><span class="page-link">下一页</span></li>
    @endif
  </ul>
</nav>

Since paging links usually There won’t be too many, and the paging link styles of different pages may also be different, so we only provide a simple modification method here, and developers can flexibly adjust it according to their own needs.

Summary

Through the introduction of this article, we have learned how the paging class that comes with the Laravel framework is implemented, and how to modify the style of paging links through custom views. Of course, this customization is not limited to pagination styles, developers can also apply it to various other layout styles.

In actual development, excellent developers can always discover the potential of the framework and optimize it according to their own needs. This is one of the technologies that must be mastered to become an excellent developer. I hope this article can be helpful to everyone, and I also hope that everyone can have a deeper understanding and application of the Laravel framework.

The above is the detailed content of How to implement custom style paging function in laravel. For more information, please follow other related articles on the PHP Chinese website!