How to solve laravel pagination without style

Laravel is a very popular modern development framework that provides a large number of convenient features and tools for developers to easily build high-quality web applications. One of the common functions is paging. Laravel also has built-in convenient paging tools, but many developers encounter the problem of missing paging styles. This article will explain how to solve this problem.

To use Laravel's paging function, we can perform paging queries through the query builder or Eloquent model object. For example, the following code can be used to query all user data and display it in paging:

use Illuminate\Support\Facades\DB;
use App\Models\User;

$users = DB::table('users')->paginate(10);

// 或者可以使用Eloquent模型对象进行分页查询

$users = User::paginate(10);

Through the above code, we can get a paging object $users, which contains the current paging user data, paging related links and other Pagination properties. By default, Laravel's paging tool has two sets of built-in paging styles: bootstrap and semantic-ui.

But if you want to use different paging styles, such as your own defined CSS style, you need to perform customized configuration.

First, we need to create a view file, which will serve as a template for our customized paging style. We can create a new template file pagination.blade.php in the resources/views/vendor/pagination/ directory. We can then write the HTML and CSS styles we need in this file. The following is a simple example:

<div class="pagination-style">
   <ul class="pagination">

       {{-- Previous Page Link --}}
       @if ($paginator->onFirstPage())
           <li class="disabled"><span>&laquo;</span></li>
       @else
           <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a></li>
       @endif

       {{-- Next Page Link --}}
       @if ($paginator->hasMorePages())
           <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a></li>
       @else
           <li class="disabled"><span>&raquo;</span></li>
       @endif

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

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

In the above code, we define our own CSS styles based on Bootstrap styles and override Laravel's default pagination template. Specific implementation details include:

1. Get the paging link through $paginator->previousPageUrl() and $paginator->nextPageUrl() and render it into HTML;
2. Pass $is_string() determines whether the current element is the "..." delimiter in the paging list, so as to perform corresponding rendering;
3. Use $is_array() to determine whether the current element is a page number link in the paging list. So as to render accordingly.

Next, we need to tell Laravel that we want to use a customized pagination template. We can add a new configuration item in /config/view.php:

'pagination' => 'vendor.pagination.pagination'

The vendor.pagination.pagination here represents the path to the paging template file we just created.

Finally, in the view file we can call our customized paging template in the following way:

{{ $users->links('vendor.pagination.pagination') }}

Through the above steps, we can customize our own paging style in Laravel . Of course, if you want to implement a richer paging style, you can do so by extending Laravel's paging function.

The above is the detailed content of How to solve laravel pagination without style. For more information, please follow other related articles on the PHP Chinese website!