How to add css to laravel pagination

Laravel is a popular PHP framework that is highly regarded for its ease of learning, using, and extensibility, and for containing powerful features. Among them, paging is one of the essential functions in web applications. This article will introduce how to implement pagination and add CSS styles in Laravel.

1. Implementing paging in Laravel

In the Laravel framework, paging is implemented through the Paginator class. The Paginator class uses Query Builder or Eloquent ORM to get data from the database and paginates the results based on page size and current page number. The specific steps are as follows:

1. Introduce the Paginator class

use Illuminate\Pagination\Paginator;

2. Retrieve data

$data = DB::table('table_name')->paginate(5);

or

$data = ModelName::paginate(5);

3. Display data

@foreach ($data as $item)
    //
@endforeach

{{ $data->links() }}

The above code will retrieve the data for the table named "table_name", set the number of records in each page to 5, and store it in the file named "data" in the variables. In the view, we can traverse the data through a foreach loop and generate paging links through the $data->links() method.

2. Add CSS styles in Laravel

Laravel provides default styles for pagination links. However, we can change its appearance by customizing CSS. If you want to disable the default style, you can do it with the following code:

{{ $data->links('') }}

Here are the steps to customize the CSS style:

1. Create a new CSS file in the public/css directory , such as "pagination.css".
2. In the view, introduce the CSS file in the head tag:

<link rel="stylesheet" href="{{ asset(&#39;css/pagination.css&#39;) }}" />

3. Add styles in the CSS file

.pagination li {
    display:inline-block;
    margin-right:5px;
    margin-bottom:5px;
    padding:5px 12px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:14px;
    color:#333;
    text-decoration:none;
}
.pagination .active {
    background-color:#007bff;
    border-color:#007bff;
    color:#fff;
}
.pagination .disabled {
    opacity:0.5;
    cursor:not-allowed;
}

The above styles Adds rounded borders to pagination links, sets font size and color, and adds a specific background color to the current page.

3. Summary

It is very simple to use the Paginator class to implement pagination in the Laravel framework. Customizing the paging style is not too difficult, just add CSS code. I hope this article can be helpful to the use of Laravel pagination and CSS styles. If you have any questions or suggestions, please leave a message in the comment area and we will be more than happy to answer your questions.

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