LaravelのページネーションにCSSを追加する方法

Laravel は、学習、使用、拡張性が容易であり、強力な機能が含まれていることで高く評価されている人気の PHP フレームワークです。中でもページングは​​Webアプリケーションに欠かせない機能の1つです。この記事では、Laravelでページネーションを実装し、CSSスタイルを追加する方法を紹介します。

1. Laravel でのページングの実装

Laravel フレームワークでは、ページングは​​ Paginator クラスを通じて実装されます。 Paginator クラスは、Query Builder または Eloquent ORM を使用してデータベースからデータを取得し、ページ サイズと現在のページ番号に基づいて結果をページ分割します。具体的な手順は次のとおりです。

1. Paginator クラスの導入

use Illuminate\Pagination\Paginator;

2. データの取得

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

または

$data = ModelName::paginate(5);

3. データの表示

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

{{ $data->links() }}

上記のコードは、「table_name」という名前のテーブルのデータを取得し、各ページのレコード数を 5 に設定し、ファイルに保存します。変数には「data」という名前が付けられます。ビューでは、foreach ループを通じてデータを走査し、$data->links() メソッドを通じてページング リンクを生成できます。

2. Laravel に CSS スタイルを追加する

Laravel は、ページネーション リンクのデフォルト スタイルを提供します。ただし、CSS をカスタマイズすることで外観を変更できます。デフォルトのスタイルを無効にしたい場合は、次のコードを使用して無効にすることができます:

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

CSS スタイルをカスタマイズする手順は次のとおりです:

1. 新しい CSS ファイルを作成しますpublic/css ディレクトリ (「pagination.css」など)。
2. ビューの head タグに CSS ファイルを導入します。

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

3. CSS ファイルにスタイルを追加します

.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;
}

上記スタイル ページネーション リンクに丸い境界線を追加し、フォント サイズと色を設定し、現在のページに特定の背景色を追加します。

3. 概要

Paginator クラスを使用して Laravel フレームワークにページネーションを実装するのは非常に簡単です。ページングスタイルのカスタマイズはそれほど難しくなく、CSS コードを追加するだけです。この記事がLaravelのページネーションとCSSスタイルの使用に役立つことを願っています。ご質問やご提案がございましたら、コメント欄にメッセージを残してください。喜んでお答えいたします。

以上がLaravelのページネーションにCSSを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。