【PR】を含みます。

フロントエンド

【JavaScript】テーブルにページネーションを追加する方法とサンプルコード

JavaScript テーブルにページネーションを追加する方法とサンプルコード

大量のデータを扱うテーブルを見やすく整理するには、ページネーション（ページ送り）機能が便利です。

このページでは、JavaScriptを使ってテーブルにページネーションを実装する方法を、コピペで使えるサンプルコードとともに分かりやすく解説します。

複数テーブルへの対応やカスタマイズ方法も紹介しているので、ぜひご活用ください。

【サンプル】テーブルにページネーションを実装

見出し1見出し2見出し3
sample1sample1sample1
sample2sample2sample2
sample3sample3sample3
sample4sample4sample4
sample5sample5sample5
sample6sample6sample6
sample7sample7sample7
sample8sample8sample8
sample9sample9sample9
sample10sample10sample10
sample11sample11sample11
sample12sample12sample12
sample13sample13sample13
sample14sample14sample14
sample15sample15sample15
sample16sample16sample16
sample17sample17sample17
sample18sample18sample18
sample19sample19sample19
sample20sample20sample20
sample21sample21sample21
sample22sample22sample22
sample23sample23sample23
sample24sample24sample24
sample25sample25sample25
sample26sample26sample26
sample27sample27sample27
sample28sample28sample28
sample29sample29sample29
sample30sample30sample30
sample31sample31sample31
sample32sample32sample32
sample33sample33sample33
sample34sample34sample34
sample35sample35sample35
sample36sample36sample36
sample37sample37sample37
sample38sample38sample38
sample39sample39sample39
sample40sample40sample40
sample41sample41sample41
sample42sample42sample42
sample43sample43sample43
sample44sample44sample44
sample45sample45sample45
sample46sample46sample46
sample47sample47sample47
sample48sample48sample48
sample49sample49sample49
sample50sample50sample50
sample51sample51sample51
sample52sample52sample52
sample53sample53sample53
sample54sample54sample54
sample55sample55sample55
sample56sample56sample56
sample57sample57sample57
sample58sample58sample58
sample59sample59sample59
sample60sample60sample60
sample61sample61sample61
sample62sample62sample62
sample63sample63sample63
sample64sample64sample64
sample65sample65sample65
sample66sample66sample66
sample67sample67sample67
sample68sample68sample68
sample69sample69sample69
sample70sample70sample70
sample71sample71sample71
sample72sample72sample72
sample73sample73sample73
sample74sample74sample74
見出し1見出し2見出し3
sample1sample1sample1
sample2sample2sample2
sample3sample3sample3
sample4sample4sample4
sample5sample5sample5
sample6sample6sample6
sample7sample7sample7
sample8sample8sample8
sample9sample9sample9
sample10sample10sample10
sample11sample11sample11
sample12sample12sample12
sample13sample13sample13
sample14sample14sample14
sample15sample15sample15
sample16sample16sample16
sample17sample17sample17
sample18sample18sample18
sample19sample19sample19
sample20sample20sample20
sample21sample21sample21
sample22sample22sample22
sample23sample23sample23
sample24sample24sample24
sample25sample25sample25
sample26sample26sample26
sample27sample27sample27
sample28sample28sample28
sample29sample29sample29
sample30sample30sample30
sample31sample31sample31
sample32sample32sample32
sample33sample33sample33
sample34sample34sample34
sample35sample35sample35
sample36sample36sample36
sample37sample37sample37
sample38sample38sample38
sample39sample39sample39
sample40sample40sample40
sample41sample41sample41
sample42sample42sample42
sample43sample43sample43
sample44sample44sample44
sample45sample45sample45
sample46sample46sample46
sample47sample47sample47
sample48sample48sample48
sample49sample49sample49
sample50sample50sample50
sample51sample51sample51
sample52sample52sample52
sample53sample53sample53
sample54sample54sample54
sample55sample55sample55
sample56sample56sample56
sample57sample57sample57
sample58sample58sample58
sample59sample59sample59
sample60sample60sample60
sample61sample61sample61
sample62sample62sample62
sample63sample63sample63
sample64sample64sample64
sample65sample65sample65
sample66sample66sample66
sample67sample67sample67
sample68sample68sample68
sample69sample69sample69
sample70sample70sample70

【コピペOK】テーブルにページネーションを追加するための実装コード

Copyをクリックするとコピーできます。

HTML
Copy
<div class="pagination-table-wrapper">
    <div class="page-num-wrapper js-page-num-wrapper"></div>
    <table class="pagination-table js-pagination-table">
        <tr class="pagination-table-row">
            <th class="pagination-table-col">見出し1</th>
            <th class="pagination-table-col">見出し2</th>
            <th class="pagination-table-col">見出し3</th>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample1</td>
            <td class="pagination-table-col">sample1</td>
            <td class="pagination-table-col">sample1</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample2</td>
            <td class="pagination-table-col">sample2</td>
            <td class="pagination-table-col">sample2</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample3</td>
            <td class="pagination-table-col">sample3</td>
            <td class="pagination-table-col">sample3</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample4</td>
            <td class="pagination-table-col">sample4</td>
            <td class="pagination-table-col">sample4</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample5</td>
            <td class="pagination-table-col">sample5</td>
            <td class="pagination-table-col">sample5</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample6</td>
            <td class="pagination-table-col">sample6</td>
            <td class="pagination-table-col">sample6</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample7</td>
            <td class="pagination-table-col">sample7</td>
            <td class="pagination-table-col">sample7</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample8</td>
            <td class="pagination-table-col">sample8</td>
            <td class="pagination-table-col">sample8</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample9</td>
            <td class="pagination-table-col">sample9</td>
            <td class="pagination-table-col">sample9</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample10</td>
            <td class="pagination-table-col">sample10</td>
            <td class="pagination-table-col">sample10</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample11</td>
            <td class="pagination-table-col">sample11</td>
            <td class="pagination-table-col">sample11</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample12</td>
            <td class="pagination-table-col">sample12</td>
            <td class="pagination-table-col">sample12</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample13</td>
            <td class="pagination-table-col">sample13</td>
            <td class="pagination-table-col">sample13</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample14</td>
            <td class="pagination-table-col">sample14</td>
            <td class="pagination-table-col">sample14</td>
        </tr>
        <tr class="pagination-table-row">
            <td class="pagination-table-col">sample15</td>
            <td class="pagination-table-col">sample15</td>
            <td class="pagination-table-col">sample15</td>
        </tr>
    </table>
</div>
CSS
Copy
.pagination-table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.pagination-table,
.pagination-table-col {
  padding: 10px;
  border: solid 1px #000;
}
.page-num-wrapper {
  margin-bottom: 10px;
}
.page-num {
  margin-right: 10px;
  color: #0000ff;
  cursor: pointer;
}
.page-num:hover {
  border-bottom: 1px solid #0000ff;
}
.page-num:last-child {
  margin-right: 0;
}
.page-num.is-current-page {
  color: #000;
  cursor: auto;
}
.page-num.is-current-page:hover {
  color: inherit;
  border: none;
}
.page-num.is-tots {
  color: #000;
}
.page-num.is-tots:hover {
  color: #000;
  border: none;
  cursor: auto;
}
JavaScript
Copy
function createTablePagination(paginationTable, pageNumWrapper, setting) {
  const rows = Array.prototype.slice.call(paginationTable.getElementsByClassName('pagination-table-row'), setting.heading);
  let currentPage = 1;
  // ページ番号クリックイベント
  pageNumWrapper.onclick = function(e) {
    const target = e.target;
    if (target.className.indexOf('js-page-num') !== -1 && target.className.indexOf('is-current-page') === -1 && target.className.indexOf('is-dots') === -1) {
      const page = Number(target.getAttribute('data-page'));
      if (page) {
        currentPage = page;
        render();
      }
    }
    // 「次へ」「前へ」対応
    if (target.className.indexOf('is-next-page') !== -1) {
      if (currentPage < getTotalPages()) {
        currentPage++;
        render();
      }
    }
    if (target.className.indexOf('is-previous-page') !== -1) {
      if (currentPage > 1) {
        currentPage--;
        render();
      }
    }
  };
  function getTotalPages() {
    return Math.ceil(rows.length / setting.number);
  }
  function render() {
    // 表示・非表示切り替え
    for (let i = 0; i < rows.length; i++) {
      rows[i].style.display = (i >= (currentPage - 1) * setting.number && i < currentPage * setting.number) ? '' : 'none';
    }
    // ページ番号描画
    pageNumWrapper.innerHTML = createPageNumbers();
  }
  function createPageNumbers() {
    const total = getTotalPages();
    const max = setting.numberDisplayedPages || total;
    let html = '';
    // 「前へ」
    if (setting.previousPage && currentPage > 1) {
      html += '<span class="page-num js-page-num is-previous-page">' + setting.previousPage + '</span>';
    }
    if (setting.numberDisplayedPages === false) {
      // すべてのページ番号を表示
      for (let i = 1; i <= total; i++) {
        if (i === currentPage) {
          html += '<span class="page-num js-page-num is-current-page" data-page="' + i + '">' + i + '</span>';
        } else {
          html += '<span class="page-num js-page-num" data-page="' + i + '">' + i + '</span>';
        }
      }
    } else {
      // 省略記号ありの通常ロジック
      const half = Math.floor(max / 2);
      let start = Math.max(1, currentPage - half);
      let end = start + max - 1;
      if (end > total) {
        end = total;
        start = Math.max(1, end - max + 1);
      }
      if (start > 1) {
        html += '<span class="page-num js-page-num" data-page="1">1</span>';
        if (start > 2) html += '<span class="page-num js-page-num is-dots">&middot;&middot;&middot;</span>';
      }
      for (let i = start; i <= end; i++) {
        if (i === currentPage) {
          html += '<span class="page-num js-page-num is-current-page" data-page="' + i + '">' + i + '</span>';
        } else {
          html += '<span class="page-num js-page-num" data-page="' + i + '">' + i + '</span>';
        }
      }
      if (end < total) {
        if (end < total - 1) html += '<span class="page-num js-page-num is-dots">&middot;&middot;&middot;</span>';
        html += '<span class="page-num js-page-num" data-page="' + total + '">' + total + '</span>';
      }
    }
    // 「次へ」
    if (setting.nextPage && currentPage < total) {
      html += '<span class="page-num js-page-num is-next-page">' + setting.nextPage + '</span>';
    }
    return html;
  }
  // 初期表示
  render();
}
// 初期化
document.addEventListener('DOMContentLoaded', function() {
  //設定 必ず配列で指定してください
  const settings = {
    heading: [
      1, //テーブルの見出し数(見出しを使用しない場合は「0」)
    ],
    number: [
      5, //テーブルに表示する最大のデータ件数(見出し数を除く)
    ],
    numberDisplayedPages: [
      false, //ページ番号の最大表示数（全部表示する場合は「false」）
    ],
    nextPage: [
      '次へ', //非表示にする場合は「''」(空文字)
    ],
    previousPage: [
      '前へ', //非表示にする場合は「''」(空文字)
    ]
  };
  const paginationTable = document.getElementsByClassName('js-pagination-table');
  const pageNumWrapper = document.getElementsByClassName('js-page-num-wrapper');
  for (let i = 0; i < paginationTable.length; i++) {
    paginationTable[i].id = 'js-pagination-table' + (i + 1);
    pageNumWrapper[i].id = 'js-page-num-wrapper' + (i + 1);
    createTablePagination(paginationTable[i], pageNumWrapper[i], {
      heading: settings.heading[i],
      number: settings.number[i],
      numberDisplayedPages: settings.numberDisplayedPages[i],
      nextPage: settings.nextPage[i],
      previousPage: settings.previousPage[i]
    });
  }
});

ページネーション付きテーブルの導入手順

以下の手順でページネーション付きテーブルを設置できます。

  1. HTML・CSS・JavaScriptのコードをそれぞれコピーして、対象のページに貼り付けてください。
  2. 必要に応じて、<tr>・<th>・<td>の行や列を編集してください。
  3. ページ番号をテーブル下に表示したい場合は、<div class="page-num-wrapper js-page-num-wrapper"></div>を</table>の直後に移動してください。
  4. 表示件数やページ番号の表示数などを変更したい場合は、JavaScriptの設定部分（106～122行目）のconst settingsを編集してください。
  5. デザインを変更したい場合は、CSSを編集してください。

ページネーション付きのテーブルを表示する方法

  • テーブルの数だけHTMLを貼り付けてください。
  • JavaScriptの設定（settingsの配列）もテーブルの数に合わせて増やしてください。
  • 設定が不足していると正しく表示されませんのでご注意ください。

今回、【サンプル】テーブルにページネーションを実装に2つのテーブルを表示していますが、JavaScriptは以下のように設定しています。

//設定 必ず配列で指定してください
const settings = {
  heading: [
    1, //テーブルの見出し数(見出しを使用しない場合は「0」)
    1,
  ],
  number: [
    5, //テーブルに表示する最大のデータ件数(見出し数を除く)
    10,
  ],
  numberDisplayedPages: [
    false, //ページ番号の最大表示数（全部表示する場合は「false」）
    3,
  ],
  nextPage: [
    '次へ', //非表示にする場合は「''」(空文字)
    'Next',
  ],
  previousPage: [
    '前へ', //非表示にする場合は「''」(空文字)
    'Prev',
  ]
};

まとめ

  • HTML・CSS・JavaScriptをコピペするだけで、ページネーション付きのテーブルが作れます。
  • 表示件数やページ番号の表示数は、JavaScriptのsettingsで調整可能です。
  • 複数テーブルを設置する場合は、設定の配列の数をテーブル数に合わせて増やしてください。
  • デザインのカスタマイズはCSSで行えます。
  • 設定が不足していると正しく動作しないので注意しましょう。

-フロントエンド
-