注目キーワード

HTMLページにページネーションを簡単に実装する

HTMLページにページネーションを簡単に実装する
  1. HOME
  2. HTML
  3. HTMLページにページネーションを簡単に実装する

HTMLとCSSで作成したWebサイトのトップページにページネーションを実装して次のページに移動できるようにしたいのでチャレンジしていたのですが、HTMLのaタグでリンクして作るページネーションでは毎回リンクする作業を投げ出す将来しか想像できませんでした。

自動でページネーションを表示させたい。

HTMLページにjQueryプラグインを組み込むことでページネーションを自動で表示する作り方ができます。簡単だったので紹介したいと思います。

 

目次

ページネーションの実装は簡単4ステップ

 

「ページネーション」は「ページャー」とか「ページ送り」などとも言いいます。

 

 

コンテンツが充実していくと一覧にしているコンテンツも増えていき、一つのHTMLページだけでは長すぎるページになってしまいますがページネーションを使用することでページの分割ができ次のページに移動してコンテンツの続きを見ることができます。

HTMLページにページネーションを実装するやり方は4ステップの簡単な手順です。

 

  1. jqueryプラグインのダウンロードと読み込み
  2. HTMLページの要素にクラスを付与
  3. ページネーションのオプションを設定
  4. CSSでデザイン

 

HTMLページにページネーションを実装する上記4ステップの流れを一つずつ順番に説明するので参考にしながら簡単にページネーションを表示させてみてください。

 

HTMLファイルにjqueryプラグインを読み込む

 

はじめにHTMLファイルにjqueryプラグインを読み込みます。

「paginathing」というjqueryプラグインをGitHubからダウンロードしてHTMLファイルに読み込みます。

 

 

GitHub / paginathingプラグインのページ

 

上のURLからGitHubのpaginathingのページを開くことができます。

 

Codeのボタンをクリックして「Dounload ZIP」をクリックすると「paginathing-master.zip」がダウンロードできるので解凍します。

解凍すると「paginathing-master」フォルダに変身するのでフォルダ内の「paginathing.min.js」をWebサイトのフォルダに配置してHTMLページのheadでpaginathing.min.jsを読み込みます。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="paginathing.min.js"></script> 

 

jquery本体を読み込んでない場合は本体も一緒に読み込んでください。

 

Advertisement

 

ページネーションを実装するHTML要素にクラス付与

 

次にページネーションを実装するHTMLページのHTMLファイル内の要素にクラスを付与します。

 

<div class="list-group">
    <div class="list-group-item"> Your Item 1</div>
    <div class="list-group-item"> Your Item 2</div>
    <div class="list-group-item"> Your Item 3</div>
    <div class="list-group-item"> Your Item 4</div>
    <div class="list-group-item"> Your Item 5</div>
    <div class="list-group-item"> Your Item 6</div>
    <div class="list-group-item"> Your Item 7</div>
    <div class="list-group-item"> Your Item 8</div>
    <div class="list-group-item"> Your Item 9</div>
    <div class="list-group-item"> Your Item 10</div>
    <div class="list-group-item"> Your Item 11</div>
    <div class="list-group-item"> Your Item 12</div>
</div>

 

親要素にクラスを付与します。このクラスはページネーションを自動で表示するためのjqueryで使用するので必ず必要です。

子要素へのクラス付与はページネーションをCSSでデザインするために使用するくらいなのでCSSの書き方によって必要であればクラス付けします。

上記のHTMLを例にした場合、ページネーションを実装すると子要素の12個のdivタグ集団がページネーションで分割してリンクされた番号のページ送りでページ移動できます。

 

ページネーションを簡単なオプションで設定

 

HTMLページにページネーションを実装するために読み込んだpaginathing.min.jsに渡すページネーションのオプションを設定します。

5個くらいの簡単なオプションでページネーションを設定するだけでも十分にHTMLページで機能してくれます。

 

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.list-group').paginathing({
            perPage: 4,
            firstLast: false,
            prevText:'prev' ,
            nextText:'next' ,
            activeClass: 'active',
        })
    });
</script>
Advertisement

 

$(‘.list-group’)の記述が先ほどページネーションを実装する親要素にクラス付与したクラス名です。HTMLの読み込みが終わってからlist-groupのクラスを付与した要素でページネーションが自動で表示します。

HTMLページに自動で表示するページネーションにはオプションを設定します。

 

サンプル記述で使用しているオプション設定の詳細

 

perPage: 4,

ページネーションで分割した1ページごとに対しての表示数の設定です。
サンプルの記述はperPage: 4,で一つのページに4アイテムずつ表示されるページネーションの実装になります。

 

firstLast: false,

最初(First)と最後(Last)のボタンを有効にするかどうかの設定です。

 

 

trueにするとページネーションに最初と最後のボタンを実装できます。falseにすると非表示になります。

 

prevText:’prev’ ,

ページネーションで一つ前のページに移動するボタンに表示するテキストの設定です。
prevのところを例えば「前へ」にすれば「前へ」というボタンとして表示できます。

 

nextText:’next’ ,

ページネーションの次のボタンに表示するテキストの設定です。
nextの部分を好きなテキスト表現に変更すれば次のページに移動する表示ボタンに表示できます。

 

activeClass: ‘active’,

アクティブ状態を示すリンククラスの設定です。
ページネーションのリンク(番号や前後のボタン)でページ移動したときに、現在どの番号のページに自分がいるのか位置を特定しやすくする設定です。

設定すると自動でクラス付与してくれます。

 

.active{
    background-color: burlywood;
}

 

上記のCSSのように.activeセレクタを作って背景色を適用すると実装するページネーションで移動したページ位置のボタンがアクティブになるので背景色が適用できます。

 

他に10個のオプションがありますが確認しておきたい場合には以下のGitHubのページで確認できます。

 

GitHub / paginathingプラグインのoptions

 

 

 

ここまでの説明で3ステップ目です。HTMLページにページネーションを簡単に実装することができていますがページネーションのデザインができていないので4ステップ目でページネーションをCSSでデザインします。

 

ページネーションをCSSでデザインする

 

 

ページネーションの動作も確認できるように一覧っぽくしたHTML要素にもCSSを使って軽くデザインしています。.list-groupセレクタの記述です。

HTMLページに実装したページネーションはulとliのリスト要素になります。ulに.paginationのクラス付けがされているのでCSSでセレクタにしてdisplay:flexでページネーションを横並びでデザインします。

 

.list-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: aliceblue;
    width: 100%;
    margin: 10px auto;
    padding: 20px;
    list-style: none;
    text-align: center;
}

.pagination{
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 5px;
}

.list-group-item {
    background: burlywood;
    margin: 10px;
    padding: 10px;
    width: 45%;
}

.pagination li{
    margin: 5px;
    border: 3px solid #333;
}

.pagination a{
    display: block;
    text-decoration: none;
    color: #333;
    padding: 20px;
}

.pagination a:hover{
    background-color: #333;
    color: aliceblue;
}

.active{
    background-color: burlywood;
}

 

横並びにしたページネーションのデザイン以外のCSSはページ移動するページ送りの番号と前と次へのリンクボタンを操作しやすいように余白をつけたり、リンクの下線を消したりなどデザインを整えているくらいです。

.activeセレクタは先述したページネーションのリンクで移動した位置でアクティブになったときのデザインに使用できるので、背景色を個別に適用することでページ移動で迷子にならないようにしておくのが良いでしょう。

ページネーションをPHPやJavaScriptで自作するのが難しい場合にはjqueryプラグインを使用したページネーションが簡単です。簡単なのですぐ実装しないとって場面でも活躍してくれるはずです。

HTMLカテゴリの最新記事