Webデザイン

【PR】

【JavaScript】テーブルにページネーションを実装する方法

JavaScriptでテーブルにページネーション

JavaScriptを使用してテーブルにページネーションを実装する方法を紹介します。

1つのページにページネーション付きのテーブルを複数表示することも可能です。

テーブルをページネーションで表示

テーブルページネーションサンプル

見出し1見出し1見出し1
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見出し1見出し1
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

コピペ用コード

  • 2024年2月14日
    最終ページを表示した時、ひとつ前のページの最終行のデータが表示されるという不具合があっため、JavaSctiptのコードを修正しました。

HTML
Copy
  1. <div class="PageNumWrap"></div>
  2. <div class="TableBox">
  3.     <table class="TableWrap">
  4.         <tr class="TableWrap_row">
  5.             <th class="TableWrap_col -tHead">見出し1</th>
  6.             <th class="TableWrap_col -tHead">見出し1</th>
  7.             <th class="TableWrap_col -tHead">見出し1</th>
  8.         </tr>
  9.         <tr class="TableWrap_row">
  10.             <td class="TableWrap_col">sample1</td>
  11.             <td class="TableWrap_col">sample1</td>
  12.             <td class="TableWrap_col">sample1</td>
  13.         </tr>
  14.         <tr class="TableWrap_row">
  15.             <td class="TableWrap_col">sample2</td>
  16.             <td class="TableWrap_col">sample2</td>
  17.             <td class="TableWrap_col">sample2</td>
  18.         </tr>
  19.         <tr class="TableWrap_row">
  20.             <td class="TableWrap_col">sample3</td>
  21.             <td class="TableWrap_col">sample3</td>
  22.             <td class="TableWrap_col">sample3</td>
  23.         </tr>
  24.         <tr class="TableWrap_row">
  25.             <td class="TableWrap_col">sample4</td>
  26.             <td class="TableWrap_col">sample4</td>
  27.             <td class="TableWrap_col">sample4</td>
  28.         </tr>
  29.         <tr class="TableWrap_row">
  30.             <td class="TableWrap_col">sample5</td>
  31.             <td class="TableWrap_col">sample5</td>
  32.             <td class="TableWrap_col">sample5</td>
  33.         </tr>
  34.         <tr class="TableWrap_row">
  35.             <td class="TableWrap_col">sample6</td>
  36.             <td class="TableWrap_col">sample6</td>
  37.             <td class="TableWrap_col">sample6</td>
  38.         </tr>
  39.         <tr class="TableWrap_row">
  40.             <td class="TableWrap_col">sample7</td>
  41.             <td class="TableWrap_col">sample7</td>
  42.             <td class="TableWrap_col">sample7</td>
  43.         </tr>
  44.         <tr class="TableWrap_row">
  45.             <td class="TableWrap_col">sample8</td>
  46.             <td class="TableWrap_col">sample8</td>
  47.             <td class="TableWrap_col">sample8</td>
  48.         </tr>
  49.         <tr class="TableWrap_row">
  50.             <td class="TableWrap_col">sample9</td>
  51.             <td class="TableWrap_col">sample9</td>
  52.             <td class="TableWrap_col">sample9</td>
  53.         </tr>
  54.         <tr class="TableWrap_row">
  55.             <td class="TableWrap_col">sample10</td>
  56.             <td class="TableWrap_col">sample10</td>
  57.             <td class="TableWrap_col">sample10</td>
  58.         </tr>
  59.         <tr class="TableWrap_row">
  60.             <td class="TableWrap_col">sample11</td>
  61.             <td class="TableWrap_col">sample11</td>
  62.             <td class="TableWrap_col">sample11</td>
  63.         </tr>
  64.         <tr class="TableWrap_row">
  65.             <td class="TableWrap_col">sample12</td>
  66.             <td class="TableWrap_col">sample12</td>
  67.             <td class="TableWrap_col">sample12</td>
  68.         </tr>
  69.         <tr class="TableWrap_row">
  70.             <td class="TableWrap_col">sample13</td>
  71.             <td class="TableWrap_col">sample13</td>
  72.             <td class="TableWrap_col">sample13</td>
  73.         </tr>
  74.         <tr class="TableWrap_row">
  75.             <td class="TableWrap_col">sample14</td>
  76.             <td class="TableWrap_col">sample14</td>
  77.             <td class="TableWrap_col">sample14</td>
  78.         </tr>
  79.         <tr class="TableWrap_row">
  80.             <td class="TableWrap_col">sample15</td>
  81.             <td class="TableWrap_col">sample15</td>
  82.             <td class="TableWrap_col">sample15</td>
  83.         </tr>
  84.     </table>
  85. </div>
CSS
Copy
  1. .TableWrap {
  2.   border-collapse: collapse;
  3.   text-align: center;
  4. }
  5.  
  6. .TableWrap,
  7. .TableWrap_col {
  8.   border: solid 1px #000;
  9.   padding: 10px;
  10. }
  11.  
  12. .PageNumWrap {
  13.   margin-bottom: 10px;
  14. }
  15.  
  16. .PageNum {
  17.   margin-right: 10px;
  18.   cursor: pointer;
  19.   color: #0000ff;
  20. }
  21.  
  22. .PageNum:hover {
  23.   border-bottom: 1px solid #0000ff;
  24. }
  25.  
  26. .PageNum:last-child {
  27.   margin-right: 0;
  28. }
  29.  
  30. .PageNum.-currentPage {
  31.   color: #000;
  32.   cursor: auto;
  33. }
  34.  
  35. .PageNum.-currentPage:hover {
  36.   color: inherit;
  37.   border: none;
  38. }
  39.  
  40. .PageNum.-dots {
  41.   color: #000;
  42. }
  43.  
  44. .PageNum.-dots:hover {
  45.   color: #000;
  46.   border: none;
  47.   cursor: auto;
  48. }
JavaSctipt
Copy
  1. //設定
  2. function setting() {
  3.   let settingLists = {
  4.     heading: [
  5.       1, //テーブルの見出し数(見出しを使用しない場合は「0」)
  6.     ],
  7.     number: [
  8.       5, //テーブルに表示する最大のデータ件数(見出し数を除く)
  9.     ],
  10.     numberDisplayedPages: [
  11.       5, //ページ番号の最大表示数（全部表示する場合は「false」）
  12.     ],
  13.     nextPage: [
  14.       '次へ', //非表示にする場合は「''」(空文字)
  15.     ],
  16.     previousPage: [
  17.       '前へ', //非表示にする場合は「''」(空文字)
  18.     ],
  19.   };
  20.   return settingLists;
  21. }
  22.  
  23. //ページ読み込み時に実行
  24. let numberOfTableWrap = document.getElementsByClassName('TableWrap').length;
  25. for (let i = 1; i <= numberOfTableWrap; i++) {
  26.   var numberOfHeading = setting()['heading'][i - 1];
  27.   var numberOfNumber = setting()['number'][i - 1];
  28.   addTableWrapId(i);
  29.   addPageNumWrapId(i)
  30.   var tableWrapID = 'TableWrap' + i;
  31.   var tableWrap = document.getElementById(tableWrapID);
  32.   addTableRowId(i);
  33.   createTable(i);
  34. }
  35.  
  36. //クラス名「TableWrap」のtableタグにID名を追加
  37. function addTableWrapId(i) {
  38.   let tableWrapLists = document.getElementsByClassName('TableWrap');
  39.   let tableWrap = tableWrapLists[i - 1];
  40.   tableWrap.setAttribute('id', 'TableWrap' + i);
  41. }
  42.  
  43. //クラス名「TableRow」のtrタグにID名を追加
  44. function addTableRowId(i) {
  45.   let tableWrapRowLists = tableWrap.getElementsByClassName('TableWrap_row');
  46.   let numberOfTableRow = tableWrapRowLists.length;
  47.   for (let j = 1; j <= numberOfTableRow - numberOfHeading; j++) {
  48.     let tableWrapRow = tableWrapRowLists[j - 1 + numberOfHeading];
  49.     tableWrapRow.setAttribute('id', 'TableWrap' + i + 'Row' + j);
  50.   }
  51. }
  52.  
  53. //クラス名「PageNumWrap」のdivタグにID名を追加
  54. function addPageNumWrapId(i) {
  55.   let pageNumWrapLists = document.getElementsByClassName('PageNumWrap');
  56.   let pageNumWrap = pageNumWrapLists[i - 1];
  57.   pageNumWrap.setAttribute('id', 'PageNumWrap' + i);
  58. }
  59.  
  60. //表示用のテーブル作成とページ番号作成
  61. function createTable(i) {
  62.   let targetTable = tableWrap;
  63.   let tableWrapRowLists = targetTable.getElementsByClassName('TableWrap_row');
  64.   let pageRemainder = (tableWrapRowLists.length - numberOfHeading) % numberOfNumber;
  65.   let pageQuotient = Math.floor((tableWrapRowLists.length - numberOfHeading) / numberOfNumber);
  66.   let numberDisplayedPages = setting()['numberDisplayedPages'][i - 1];
  67.   let pageHtml = '';
  68.   let flag = true;
  69.  
  70.   if (pageRemainder === 0) {
  71.     for (let pageNum = 1; pageNum <= pageQuotient; pageNum++) {
  72.       if (pageNum === 1) {
  73.         pageHtml += '<span class="PageNum -currentPage">' + pageNum + '</span>';
  74.       } else {
  75.         if (numberDisplayedPages) {
  76.           if (pageNum <= numberDisplayedPages) {
  77.             pageHtml += '<span class="PageNum" onclick="pagenation(' + i + ',' + pageNum + ');">' + pageNum + '</span>';
  78.           } else if (flag) {
  79.             pageHtml += '<span class="PageNum -dots">&middot;&middot;&middot;</span>';
  80.             flag = false;
  81.           }
  82.         } else {
  83.           pageHtml += '<span class="PageNum" onclick="pagenation(' + i + ',' + pageNum + ');">' + pageNum + '</span>';
  84.         }
  85.       }
  86.     }
  87.     if (pageQuotient > 1) {
  88.       if (numberDisplayedPages) {
  89.         if (flag) {
  90.           pageHtml += '<span class="PageNum -nextPage" onclick="pagenation(' + i + ', 2);">' + setting()['nextPage'][i - 1] + '</span>';
  91.         } else {
  92.           pageHtml += '<span class="PageNum" onclick="pagenation(' + i + ',' + pageQuotient + ');">' + pageQuotient + '</span>\
  93.                        <span class="PageNum -nextPage" onclick="pagenation(' + i + ', 2);">' + setting()['nextPage'][i - 1] + '</span>';
  94.         }
  95.       } else {
  96.         pageHtml += '<span class="PageNum -nextPage" onclick="pagenation(' + i + ', 2);">' + setting()['nextPage'][i - 1] + '</span>';
  97.       }
  98.     }
  99.   } else {
  100.     for (let pageNum2 = 1; pageNum2 <= pageQuotient + 1; pageNum2++) {
  101.       if (pageNum2 === 1) {
  102.         pageHtml += '<span class="PageNum -currentPage">' + pageNum2 + '</span>';
  103.       } else {
  104.         if (numberDisplayedPages) {
  105.           if (pageNum2 <= numberDisplayedPages) {
  106.             pageHtml += '<span class="PageNum" onclick="pagenation(' + i + ',' + pageNum2 + ');">' + pageNum2 + '</span>';
  107.           } else if (flag) {
  108.             pageHtml += '<span class="PageNum -dots">&middot;&middot;&middot;</span>';
  109.             flag = false;
  110.           }
  111.         } else {
  112.           pageHtml += '<span class="PageNum" onclick="pagenation(' + i + ',' + pageNum2 + ');">' + pageNum2 + '</span>';
  113.         }
  114.       }
  115.     }
  116.     if (pageQuotient + 1 > 1) {
  117.       if (numberDisplayedPages) {
  118.         if (flag) {
  119.           pageHtml += '<span class="PageNum -nextPage" onclick="pagenation(' + i + ', 2);"> ' + setting()['nextPage'][i - 1] + '</span>';
  120.         } else {
  121.           pageHtml += '<span class="PageNum" onclick="pagenation(' + i + ',' + (pageQuotient + 1) + ');">' + (pageQuotient + 1) + '</span>\
  122.                        <span class="PageNum -nextPage" onclick="pagenation(' + i + ', 2);"> ' + setting()['nextPage'][i - 1] + '</span>';
  123.         }
  124.       } else {
  125.         pageHtml += '<span class="PageNum -nextPage" onclick="pagenation(' + i + ', 2);"> ' + setting()['nextPage'][i - 1] + '</span>';
  126.       }
  127.     }
  128.   }
  129.  
  130.   let pageNumWrapID = 'PageNumWrap' + i;
  131.   document.getElementById(pageNumWrapID).innerHTML = pageHtml;
  132.  
  133.   //表示するのクラス名「TableWrap_row」調整
  134.   for (let k = 1; k <= tableWrapRowLists.length - numberOfHeading; k++) {
  135.     let TableWrapRowId = 'TableWrap' + i + 'Row' + k;
  136.     if (k <= numberOfNumber) {
  137.       document.getElementById(TableWrapRowId).style.display = '';
  138.     } else {
  139.       document.getElementById(TableWrapRowId).style.display = 'none';
  140.     }
  141.   }
  142. }
  143.  
  144. //ページ番号をクリックした時の処理
  145. function pagenation(tableNum, num) {
  146.   let targetTableID = 'TableWrap' + tableNum;
  147.   let targetTable = document.getElementById(targetTableID);
  148.   let tableWrapRowLists = targetTable.getElementsByClassName('TableWrap_row');
  149.   let heading = setting()['heading'][tableNum - 1];
  150.   let number = setting()['number'][tableNum - 1];
  151.   let numberDisplayedPages = setting()['numberDisplayedPages'][tableNum - 1];
  152.   let leftPages = Math.ceil(numberDisplayedPages / 2);
  153.   let rightPages = Math.floor(numberDisplayedPages / 2);
  154.   let pageRemainder = (tableWrapRowLists.length - heading) % number;
  155.   let pageQuotient = Math.floor((tableWrapRowLists.length - heading) / number);
  156.   let pageHtml = '';
  157.   let flag = true;
  158.  
  159.   //テーブルの行をいったん消す
  160.   for (let i = 1; i <= tableWrapRowLists.length - heading; i++) {
  161.     let TableWrapRowId = 'TableWrap' + tableNum + 'Row' + i;
  162.     document.getElementById(TableWrapRowId).style.display = 'none';
  163.   }
  164.  
  165.   //テーブルを再表示
  166.   if (num <= pageQuotient || pageRemainder === 0) {
  167.     for (let j = num * number - (number - 1); j <= num * number; j++) {
  168.       let TableWrapRowId = 'TableWrap' + tableNum + 'Row' + j;
  169.       document.getElementById(TableWrapRowId).style.display = '';
  170.     }
  171.   } else {
  172.     for (let k = num * number - (number - 1); k <= num * number - number + pageRemainder; k++) {
  173.       let TableWrapRowId = 'TableWrap' + tableNum + 'Row' + k;
  174.       document.getElementById(TableWrapRowId).style.display = '';
  175.     }
  176.   }
  177.  
  178.   if (numberDisplayedPages) {
  179.     if (num !== 1 && num > numberDisplayedPages - rightPages) {
  180.       pageHtml += '<span class="PageNum -previousPage" onclick="pagenation(' + tableNum + ',' + (num - 1) + ');" > ' + setting()['previousPage'][tableNum - 1] + '</span>\
  181.                    <span class="PageNum" onclick="pagenation(' + tableNum + ',1);">1</span>\
  182.                    <span class="PageNum -dots">&middot;&middot;&middot;</span>';
  183.     } else if (num !== 1) {
  184.       pageHtml += '<span class="PageNum -previousPage" onclick="pagenation(' + tableNum + ',' + (num - 1) + ');" > ' + setting()['previousPage'][tableNum - 1] + '</span>';
  185.     }
  186.   } else {
  187.     if (num !== 1) {
  188.       pageHtml += '<span class="PageNum -previousPage" onclick="pagenation(' + tableNum + ',' + (num - 1) + ');" > ' + setting()['previousPage'][tableNum - 1] + '</span>';
  189.     }
  190.   }
  191.  
  192.   if (pageRemainder === 0) {
  193.     for (let pageNum = 1; pageNum <= pageQuotient; pageNum++) {
  194.       if (numberDisplayedPages) {
  195.         if (num - leftPages < 1) {
  196.           if (num === pageNum) {
  197.             pageHtml += '<span class="PageNum -currentPage">' + pageNum + '</span>';
  198.           } else {
  199.             if (pageNum <= numberDisplayedPages) {
  200.               pageHtml += '<span class="PageNum" onclick="pagenation(' + tableNum + ',' + pageNum + ');">' + pageNum + '</span>';
  201.             }
  202.           }
  203.         } else {
  204.           if ((pageNum > num - leftPages || pageNum > pageQuotient - numberDisplayedPages) && pageNum <= num + rightPages) {
  205.             if (num === pageNum) {
  206.               pageHtml += '<span class="PageNum -currentPage">' + pageNum + '</span>';
  207.             } else {
  208.               pageHtml += '<span class="PageNum" onclick="pagenation(' + tableNum + ',' + pageNum + ');">' + pageNum + '</span>';
  209.             }
  210.           }
  211.         }
  212.       } else {
  213.         if (num === pageNum) {
  214.           pageHtml += '<span class="PageNum -currentPage">' + pageNum + '</span>';
  215.         } else {
  216.           pageHtml += '<span class="PageNum" onclick="pagenation(' + tableNum + ',' + pageNum + ');">' + pageNum + '</span>';
  217.         }
  218.       }
  219.     }
  220.  
  221.     if (numberDisplayedPages) {
  222.       if (pageQuotient !== num && num < pageQuotient - rightPages) {
  223.         pageHtml += '<span class="PageNum -dots">&middot;&middot;&middot;</span>\
  224.                    <span class="PageNum" onclick="pagenation(' + tableNum + ',' + pageQuotient + ');">' + pageQuotient + '</span>\
  225.                    <span class="PageNum -nextPage" onclick="pagenation(' + tableNum + ',' + (num + 1) + ');">' + setting()['nextPage'][tableNum - 1] + '</span>';
  226.       } else if (pageQuotient !== num) {
  227.         pageHtml += '<span class="PageNum -nextPage" onclick="pagenation(' + tableNum + ',' + (num + 1) + ');">' + setting()['nextPage'][tableNum - 1] + '</span>';
  228.       }
  229.     } else {
  230.       if (pageQuotient !== num) {
  231.         pageHtml += '<span class="PageNum -nextPage" onclick="pagenation(' + tableNum + ',' + (num + 1) + ');">' + setting()['nextPage'][tableNum - 1] + '</span>';
  232.       }
  233.     }
  234.  
  235.   } else {
  236.     for (let pageNum2 = 1; pageNum2 <= pageQuotient + 1; pageNum2++) {
  237.       if (numberDisplayedPages) {
  238.         if (num - leftPages < 1) {
  239.           if (num === pageNum2) {
  240.             pageHtml += '<span class="PageNum -currentPage">' + pageNum2 + '</span>';
  241.           } else {
  242.             if (pageNum2 <= numberDisplayedPages) {
  243.               pageHtml += '<span class="PageNum" onclick="pagenation(' + tableNum + ',' + pageNum2 + ');">' + pageNum2 + '</span>';
  244.             }
  245.           }
  246.         } else {
  247.           if ((pageNum2 > num - leftPages || pageNum2 > pageQuotient + 1 - numberDisplayedPages) && pageNum2 <= num + rightPages) {
  248.             if (num === pageNum2) {
  249.               pageHtml += '<span class="PageNum -currentPage">' + pageNum2 + '</span>';
  250.             } else {
  251.               pageHtml += '<span class="PageNum" onclick="pagenation(' + tableNum + ',' + pageNum2 + ');">' + pageNum2 + '</span>';
  252.             }
  253.           }
  254.         }
  255.       } else {
  256.         if (num === pageNum2) {
  257.           pageHtml += '<span class="PageNum -currentPage">' + pageNum2 + '</span>';
  258.         } else {
  259.           pageHtml += '<span class="PageNum" onclick="pagenation(' + tableNum + ',' + pageNum2 + ');">' + pageNum2 + '</span>';
  260.         }
  261.       }
  262.     }
  263.  
  264.     if (numberDisplayedPages) {
  265.       if (pageQuotient + 1 !== num && num < pageQuotient + 1 - rightPages) {
  266.         pageHtml += '<span class="PageNum -dots">&middot;&middot;&middot;</span>\
  267.                    <span class="PageNum" onclick="pagenation(' + tableNum + ',' + (pageQuotient + 1) + ');">' + (pageQuotient + 1) + '</span>\
  268.                    <span class="PageNum -nextPage" onclick="pagenation(' + tableNum + ',' + (num + 1) + ');">' + setting()['nextPage'][tableNum - 1] + '</span>';
  269.       } else if (pageQuotient + 1 !== num) {
  270.         pageHtml += '<span class="PageNum -nextPage" onclick="pagenation(' + tableNum + ',' + (num + 1) + ');">' + setting()['nextPage'][tableNum - 1] + '</span>';
  271.       }
  272.     } else {
  273.       if (pageQuotient + 1 !== num) {
  274.         pageHtml += '<span class="PageNum -nextPage" onclick="pagenation(' + tableNum + ',' + (num + 1) + ');">' + setting()['nextPage'][tableNum - 1] + '</span>';
  275.       }
  276.     }
  277.   }
  278.   let pageNumWrapID = 'PageNumWrap' + tableNum;
  279.   document.getElementById(pageNumWrapID).innerHTML = pageHtml;
  280. }

使用方法

HTMLとCSS、JavaScriptをそのままコピーし、貼り付けることで使用することができます。

必要に応じて貼り付けた「HTML」の「<tr>」、「<th>」、「<td>」タグを増やすなのど変更を適宜行ってください。

ページ番号の位置をテーブル下に変更したい場合は、「HTML」の1行目の「<div class="PageNumWrap"></div>」を「</table>」の後ろに変更してください。

「JavaScript」の1～21行目の設定を変更することで、テーブルの「見出し数」、「表示するデータの件数（行数）」、「ページ番号の最大表示数」、「次へ・前への文字の表示・非表示」の設定を行うことができます。

ページ番号のデザインを変更する場合は、CSSを変更してください。

１つのページにページネーション付きのテーブルを複数表示する場合

表示したいテーブルの数だけ「HTML」を貼り付けてください。

「JavaScript」の1～21行目の設定を、増やしたテーブルの数だけ増やす必要があります。※ここが未設定だとテーブルが上手く表示されないので注意してください

今回、サンプルに2つのテーブルを表示してますが、「JavaScript」の設定部分は下記のように設定してます。

JavaSctipt
  1. //設定
  2. function setting() {
  3.   let settingLists = {
  4.     heading: [
  5.       1, //テーブルの見出し数(見出しを使用しない場合は「0」)
  6.       1,
  7.     ],
  8.     number: [
  9.       5, //テーブルに表示する最大のデータ件数(見出し数を除く)
  10.       10,
  11.     ],
  12.     numberDisplayedPages: [
  13.       5, //ページ番号の最大表示数（全部表示する場合は「false」）
  14.       3,
  15.     ],
  16.     nextPage: [
  17.       '次へ', //非表示にする場合は「''」(空文字)
  18.       'Next',
  19.     ],
  20.     previousPage: [
  21.       '前へ', //非表示にする場合は「''」(空文字)
  22.       'Prev',
  23.     ],
  24.   };
  25.   return settingLists;
  26. }

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-Webデザイン
-, ,