検索
ホームページ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 までご連絡ください。
技術的なトラブル:分散型チームメンバーのツールとリソースへの公平なアクセスを確保する技術的なトラブル:分散型チームメンバーのツールとリソースへの公平なアクセスを確保するApr 29, 2025 am 12:40 AM

分散したチームメンバーがツールやリソースに公正にアクセスできるようにする方法には、次のものが含まれます。1)接続の問題を解決するために、非同期ビデオやテキストの更新などの低帯域幅の代替品を使用します。 2)コアの重複労働時間を設定し、タイムゾーンの違いを管理するための柔軟な労働時間を提供する。 3)翻訳機能と文化的啓発トレーニングを通じて、さまざまな文化的ニーズに適応します。これらの戦略は、包括的で効率的なリモート作業環境の作成に役立ちます。

インスタントメッセージング必須ヘイブ:リモート設定でのリアルタイム通信の促進インスタントメッセージング必須ヘイブ:リモート設定でのリアルタイム通信の促進Apr 29, 2025 am 12:38 AM

forenhancingRemoteCollaboration、anintantmessagingToolMusthave:1)信頼性のforconsistmessagedelivery、2)Anintuitiveuserfaceforeasynavigation、3)real-timeNotificationStayUpdated、4)SeamlessefileSharing forefficientDocumentexchange、5)統合

分散型チームで働いている間に課題に直面したことはありますか?分散型チームで働いている間に課題に直面したことはありますか?Apr 29, 2025 am 12:35 AM

ManagingDistributedTeamSiscommunication.toAddressthis、Usetoolslikeslack、Zoom、andgithub; setClearExpectations; fostertrustandautonomy; emplional asynchronousworkpatterns; and integreatetaskManagementionwithCommunicationPlatfortfortforfoltivedive

新しいLaravelバージョンのセキュリティ改善は何ですか?新しいLaravelバージョンのセキュリティ改善は何ですか?Apr 29, 2025 am 12:17 AM

Laravelの最新バージョンは、以下を含むセキュリティを大幅に改善しました。1。CSRF保護の強化は、より堅牢なトークン検証メカニズムを介して。 2。強化されたクエリ構築方法を通じて、SQL注入保護の改善。 3.ユーザーデータセキュリティを確保するためのセッション暗号化の改善。 4。認証システムの改善、より細かい粒状ユーザー認証と多要素認証(MFA)をサポートします。

タイムゾーンタンゴ:グローバルな労働力におけるスケジューリングの競合をナビゲートするタイムゾーンタンゴ:グローバルな労働力におけるスケジューリングの競合をナビゲートするApr 29, 2025 am 12:13 AM

ConchedulingConflictsinaglobalworkforce、usetechnology、共感、および戦略的計画:1)1)雇用を採用しています

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

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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール