Bagaimana untuk melaksanakan fungsi paging gaya tersuai dalam laravel

Dengan pembangunan berterusan rangka kerja Laravel, semakin banyak projek web kini memilihnya, sudah tentu ramai pembangun juga memilih untuk menggunakan Laravel untuk membangunkan tapak web mereka sendiri. Dalam pembangunan harian, untuk pelaksanaan fungsi, pendekatan yang biasa adalah untuk mencari perpustakaan sumber terbuka atau menulis komponen sendiri Terdapat banyak pengalaman dan ringkasan sebelumnya di Internet Artikel ini adalah salah satu daripadanya gunakannya. Laravel dilengkapi dengan kelas paging sendiri untuk melaksanakan paging gaya tersuai.

Kelas paging Laravel sendiri

Rangka kerja Laravel dilengkapi dengan perpustakaan paging, yang sangat mudah untuk digunakan. Dalam pengawal, kami biasanya menggunakan kaedah paginate() untuk menanyakan data dan mengembalikan hasil bernombor Dalam templat Blade, kami boleh terus menggunakan kaedah links() untuk memaparkan pautan bernombor berikut:

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

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

Dengan cara ini, kod melengkapkan kerja pertanyaan halaman dan memaparkan pautan halaman ke halaman. Tetapi gaya pautan ini adalah lalai Jika kita ingin menukar gaya, kita perlu menyesuaikan paparan.

Paparan Tersuai

Mari kita fahami kaedah links() dahulu. Kita boleh mengeluarkan nilai {{ $data->links() }} dalam templat Blade adalah seperti berikut:

<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>

Kami mendapati bahawa pautan paging yang diberikan oleh kaedah links() secara lalai ialah senarai tidak tertib, setiap item ialah elemen li bebas, dengan kelas active mewakili nombor halaman semasa dan kelas disabled mewakili nombor halaman Tidak tersedia. Jika kami ingin menyesuaikan gaya pautan penomboran, kami perlu mengatasi pemaparan pautan lalai Laravel dalam fail paparan.

Dalam Laravel, anda boleh menggunakan perintah php artisan make:view untuk menjana fail paparan, seperti berikut:

php artisan make:view pagination

Arahan ini akan mencipta fail bernama resources/views dalam pagination.blade.php direktori . Tulis kod berikut dalam fail ini:

@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

Kod ini ialah kod paparan halaman lalai Laravel Kami boleh menyalinnya ke fail pagination.blade.php dan kemudian menyesuaikannya.

Gaya tersuai

Gaya tersuai bergantung pada pilihan pembangun sendiri Contohnya, kami boleh menukar pautan paging kepada gaya butang:

<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>

Disebabkan oleh paging Di sana. biasanya tidak terlalu banyak pautan, dan gaya pautan halaman halaman yang berbeza mungkin juga berbeza, jadi kami hanya menyediakan kaedah pengubahsuaian yang mudah di sini, dan pembangun boleh melaraskannya secara fleksibel mengikut keperluan mereka sendiri.

Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari cara kelas paging yang disertakan dengan rangka kerja Laravel dilaksanakan dan cara mengubah suai gaya pautan paging melalui paparan tersuai. Sudah tentu, penyesuaian ini tidak terhad kepada gaya penomboran, pembangun juga boleh menerapkannya pada pelbagai gaya susun atur lain.

Dalam pembangunan sebenar, pembangun yang cemerlang sentiasa boleh menemui potensi rangka kerja dan mengoptimumkannya mengikut keperluan mereka sendiri. Ini adalah salah satu teknologi yang mesti dikuasai untuk menjadi pembangun yang cemerlang. Saya harap artikel ini dapat membantu semua orang, dan saya juga berharap semua orang dapat memahami dan mengaplikasikan rangka kerja Laravel dengan lebih mendalam.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi paging gaya tersuai dalam laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!