検索
ホームページPHPフレームワークLaravelLaravelのページネーションにCSSを追加する方法

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

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

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

  1. Paginator クラスの導入
use Illuminate\Pagination\Paginator;
  1. データの取得
$data = DB::table('table_name')->paginate(5);

または

$data = ModelName::paginate(5);
  1. データの表示
@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>
  1. 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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Laravelを使用したフルスタック開発:APIとフロントエンドロジックの管理Laravelを使用したフルスタック開発:APIとフロントエンドロジックの管理Apr 28, 2025 am 12:22 AM

Laravelフルスタック開発では、APIとフロントエンドロジックを管理するための効果的な方法には次のものがあります。1)RESTFULコントローラーの使用とリソースルーティング管理API。 2)ブレードテンプレートとvue.jsまたはReactを介したフロントエンドロジックの処理。 3)APIバージョン化とページングを通じてパフォーマンスの最適化。 4)保守性とスケーラビリティを確保するために、バックエンドとフロントエンドのロジックの分離を維持します。

翻訳の紛失:分配されたチームの文化的ニュアンスと誤解翻訳の紛失:分配されたチームの文化的ニュアンスと誤解Apr 28, 2025 am 12:22 AM

totackleculturalintricaciesindistributedteams、fosteranenvironmentebreatingdifferences、vemindfulofcommunication、およびusetoolsforclarity.1)CulturalExchangesSsionsistoriesSionsandtraditions.2)CommunicationMethodStosuitCultulpreference

接続の測定:リモート通信の有効性に関する分析と洞察接続の測定:リモート通信の有効性に関する分析と洞察Apr 28, 2025 am 12:16 AM

COMSESTESTESTESTESTESTESTESTESTESTESTESTESTEREMOTECommunication、Focuson:1)EngagementMetricsLikeMessageFRequenceAndResponsetime、2)SentimentAnalysistogaugeMotionaltone、3)Meating fisondentivencivitionSanceAndAnceAndActionItems、and4)netarysistoundErtindErtindESTANDSTANDCOMMUNICATIONPA

分散チームのセキュリティリスク:遠隔の世界でデータを保護する分散チームのセキュリティリスク:遠隔の世界でデータを保護するApr 28, 2025 am 12:11 AM

toprotectSensitivedAtaindistributedTeams、explientamulti-facetedapproach:1)usedto-to-dencryptionforsecurecommunication、2)applyrole BasedAccessControl(RBAC)tomanagepermissions、3)incryptdataatrestwithkeymanagemenations and4)

電子メールを超えて:リモートコラボレーションのための最新のコミュニケーションプラットフォームの探索電子メールを超えて:リモートコラボレーションのための最新のコミュニケーションプラットフォームの探索Apr 28, 2025 am 12:03 AM

いいえ、emailisnotthebostforremotecollaborationtoday.modern platformlack、Microsoftチーム、ズーム、Asana、およびtrellellofferreal-time通信、プロジェクト管理、および統合FeatureSthancteamWorkedeficiency。

共同ドキュメント編集:分散チームのワークフローの合理化共同ドキュメント編集:分散チームのワークフローの合理化Apr 27, 2025 am 12:21 AM

コラボレーティブドキュメント編集は、分散チームがワークフローを最適化するための効果的なツールです。リアルタイムのコラボレーションとフィードバックループを通じてコミュニケーションとプロジェクトの進捗を改善し、一般的なツールにはGoogleドキュメント、Microsoftチーム、概念が含まれます。使用時のバージョン制御や学習曲線などの課題に注意してください。

前のLaravelバージョンはどのくらいサポートされますか?前のLaravelバージョンはどのくらいサポートされますか?Apr 27, 2025 am 12:17 AM

PreviousVersionOflAravelisSupportedededSedesixmonthsandSecurityFixesseSeCurityfixesseSearaheearAfterAnewMajorversion'sRelease.Surstanding understanding understanding untinding for PlanningUpgrades、保証されている可能性、およびレバレングリエンジュレーリュアリュアリュアリュアリュアシュリュアケーション

フロントエンド開発とバックエンド開発の両方のLaravelの機能を活用しますフロントエンド開発とバックエンド開発の両方のLaravelの機能を活用しますApr 27, 2025 am 12:16 AM

laravelcanbeefeectivelyは、development.1)backend:utilizelaravel'seloquentormforsimprifiedDatabaseInteractions.2)frontend:cleanhtmlandEgratevue.jsfordynamicspasのレバレッジブラデテンプレーズ、エンサイリングレスレスレスフロレンテンドバッキンティントのためにレバレッジブラデテットを使用します

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター