Q&A
コードは画像ではこちらの手元で確認できませんので、テキストでマークダウンのcodeにてご提示ください。
現在HPのデザインカンプからのコーディングを行っております。
ページネーションを実装したいと思うのですがプラグインを読み込んでもうまく動作しません。
どなたか解決方法を教えていただけないでしょうか。
使用しているプラグインはGitHubのpaginathing.min.jsです。
親要素のクラス名はtestで、子要素にdlがありdl内にddとdtがあります。
htmlのhead内で
jQuery本体
↓
paginathing.min.js
↓
script.js（関数記述）
の順で読み込んでいます。
また今回はプラグインを使用してページネーションの作成を試みているのですが、実際のweb制作の現場でもプラグインでページネーションを使用しているのでしょうか？
それともプラグインを使用せずjQuery(もしくはjavascript)で記述しているのでしょうか？
まだjQuery学習中であり、初歩的な質問となりますが教えていただけると幸いです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Products</title> 8 <link rel="stylesheet" href="stylesheet.css"> 9 <script src="../jQuery/jquery-3.6.0.min.js"></script> 10 <script type="text/javascript" src="../jQuery/paginathing.min.js"></script> 11 <script src="../jQuery/script.js"></script> 12 13</head> 14 <body> 15 <header> 16 <div class="title"> 17 Funiture Design 18 </div> 19 <div class="menu"> 20 <div class="nav-wrapper"> 21 <nav class="header-nav"> 22 <ul class="nav-list"> 23 <li class="nav-item"><a href="#">PRODUCT</a></li> 24 <li class="nav-item"><a href="#">ABOUT</a></li> 25 <li class="nav-item"><a href="#">COMPANY</a></li> 26 <li class="nav-item"><a href="#">CONTACT</a></li> 27 </ul> 28 </nav> 29 30 </div> 31 <button class="burger-btn"> 32 <span class="bar bar-top"></span> 33 <span class="bar bar-middle"></span> 34 <span class="bar bar-bottom"></span> 35 </button> 36 </div> 37 </header> 38 <main> 39 <div class="sub-title">PRODUCTS</div> 40 <div class="test"> 41 <dl> 42 <dt>title</dt> 43 <dd>content</dd> 44 </dl> 45 <dl> 46 <dt>title</dt> 47 <dd>content</dd> 48 </dl> 49 <dl> 50 <dt>title</dt> 51 <dd>content</dd> 52 </dl> 53 <dl> 54 <dt>title</dt> 55 <dd>content</dd> 56 </dl> 57 <dl> 58 <dt>title</dt> 59 <dd>content</dd> 60 </dl> 61 <dl> 62 <dt>title</dt> 63 <dd>content</dd> 64 </dl> 65 <dl> 66 <dt>title</dt> 67 <dd>content</dd> 68 </dl> 69 <dl> 70 <dt>title</dt> 71 <dd>content</dd> 72 </dl> 73 <dl> 74 <dt>title</dt> 75 <dd>content</dd> 76 </dl> 77 <dl> 78 <dt>title</dt> 79 <dd>content</dd> 80 </dl> 81 <dl> 82 <dt>title</dt> 83 <dd>content</dd> 84 </dl> 85 <dl> 86 <dt>title</dt> 87 <dd>content</dd> 88 </dl> 89 <dl> 90 <dt>title</dt> 91 <dd>content</dd> 92 </dl> 93 <dl> 94 <dt>title</dt> 95 <dd>content</dd> 96 </dl> 97 <dl> 98 <dt>title</dt> 99 <dd>content</dd> 100 </dl> 101 <dl> 102 <dt>title</dt> 103 <dd>content</dd> 104 </dl> 105 <dl> 106 <dt>title</dt> 107 <dd>content</dd> 108 </dl> 109 <dl> 110 <dt>title</dt> 111 <dd>content</dd> 112 </dl> 113 </div> 114 <p class="more"><a href="product.html">View More</a></p> 115 </main> 116 <footer> 117 <div class="sns"> 118 <ul class="list"> 119 <li class="insta"><a href="#">INSTAGRAM</a></li> 120 <li class="twi"><a href="#">TWITTER</a></li> 121 <li class="fb"><a href="#">FACEBOOK</a></li> 122 </ul> 123 </div> 124 <div class="copyright"> 125 © Funiture Design 126 </div> 127 </footer> 128 129 </body> 130</html>
scss
1body{ 2 padding: 0 40px 0 40px; 3 max-width: 1360px; 4 & header{ 5 display:flex; 6 justify-content: space-between; 7 align-items: center; 8 height: 80px; 9 & .title{ 10 font-size: 22.5px; 11 font-weight: bold; 12 } 13 & .menu{ 14 & button{ 15 background: transparent; 16 border:0; 17 border-radius: 0; 18 color: inherit; 19 cursor: pointer; 20 font: inherit; 21 margin: 0; 22 outline: none; 23 padding: 0; 24 vertical-align: middle; 25 } 26 & .burger-btn{ 27 display:block; 28 width:39px; 29 height:39px; 30 position:relative; 31 z-index:3; 32 border: none; 33 & .bar{ 34 width:20px; 35 height:1px; 36 display:block; 37 position:absolute; 38 left:50%; 39 transform:translateX(-50%); 40 background-color:black; 41 } 42 43 & .bar-top{ 44 top:10px; 45 } 46 & .bar-middle{ 47 top:50%; 48 transform:translate(-50%,-50%); 49 } 50 & .bar-bottom{ 51 bottom:10px; 52 } 53 } 54 55 & .burger-btn.close .bar-top{ 56 transform:translate(-50%,10px)rotate(45deg); 57 transition:transform .3s; 58 } 59 & .burger-btn.close .bar-middle{ 60 opacity:0; 61 transition:opacity .3s; 62 } 63 & .burger-btn.close .bar-bottom{ 64 transform:translate(-50%,-8px)rotate(-45deg); 65 transition:transform .3s; 66 } 67 68 & .nav-wrapper{ 69 visibility: hidden; 70 opacity: 0; 71 height:100vh; 72 width:100vw; 73 position:fixed; 74 top:0; 75 left:0; 76 transition:all .5s; 77 z-index:2; 78 79 & .header-nav{ 80 width:100%; 81 height:100%; 82 background-color: rgb(63, 62, 62); 83 z-index:2; 84 & .nav-list{ 85 display:block; 86 position:absolute; 87 transition: all .5s; 88 // // top:50%; 89 left:-25%; 90 // transform:translateX(-100%); 91 text-align: center; 92 & .nav-item{ 93 margin-right: 0; 94 margin-bottom: 20px; 95 list-style: none; 96 & a{ 97 text-decoration: none; 98 color:#fff; 99 } 100 } 101 } 102 & .nav-list.fade{ 103 // transform: translateX(0); 104 left: 0; 105 106 } 107 } 108 } 109 & .nav-wrapper.fade{ 110 visibility: visible; 111 opacity: 1; 112 } 113 114 } 115 116 } 117 & main{ 118 119 & .more{ 120 text-align: center; 121 margin:40px 0 40px 0; 122 & a{ 123 text-decoration: none; 124 color:#000000; 125 } 126 } 127 & .test{ 128 display: grid; 129 grid-template-columns: repeat(4,1fr); 130 gap:15px; 131 & .test-box{ 132 width:100%; 133 background-color: red; 134 } 135 } 136 } 137 & footer{ 138 display: flex; 139 justify-content: space-between; 140 align-items: center; 141 font-size: 12px; 142 & .sns{ 143 & .list{ 144 display: flex; 145 list-style: none; 146 padding-left: 0; 147 & li{ 148 display: inline-block; 149 margin-right: 30px; 150 & a{ 151 text-decoration: none; 152 color: black; 153 } 154 } 155 } 156 } 157 } 158 159}
script
1$(function() { 2 $('.test').paginathing({ 3 perPage: 8, 4 prevText:'前へ', 5 nextText:'次へ', 6 activeClass: 'navi-active', 7 }) 8});
画像では確認できないことを知らず失礼しました。
テキストにてコードを記述しましたので、お手数ですが確認お願いできますでしょうか。
＞画像では確認できないことを知らず失礼しました。
はい。コードをコピペできませんから。
＞使用しているプラグインはGitHubのpaginathing.min.jsです。
こちら、認識齟齬なくすためにご自身が取得したURLを提示いただけますか？
あと、cssのコードもあったほうが良いと思います。
あともう1点、HTMLが半端なところで切れてるように思います。
これで全部ですか？
起きてる現象は何でしょう？
（回答に移行）
重ね重ね申し訳ありません。
質問とは関係ないと思いほかの記述を省いていました。
全てを記述しようと試みましたが文字制限がかかってしまい、記述しきれませんでした。明らかに今回の質問とは関係ない箇所を削除して、できる限りコードをそのまま記載してあります。
またプラグインのURLは以下の通りです。
https://github.com/alfrcr/paginathing/blob/master/paginathing.min.js
起きている現象はページネーションが表示されないことです。
CSSなしでは確認できたということなのですね。一度私のほうでもCSSのlinkを消して再読み込みしたのですがやはりページネーションは表示されませんでした。
確認ですがjQueryの関数を記述する箇所はpaginathing.min.js内ではなく、今回私が用意したscript.js内でよろしいのでしょうか。
ご丁寧に回答ありがとうございます。
職場に出勤してしまったので、また帰宅してから確認してみます。
リンクの記述も一応確認したつもりでしたが、再度見てみます。
今回のHTMLに記載している方法も少し自信がないのですが、記載方法として大方の間違いはありませんでしょうか？
プラグインを使用せずにページネーションを作成することもあるんですね。
やり方を調べたのですが記述量が多く、プラグインの方がいいのかなと思っていました。
ですが一度挑戦してみます。
回答への返信でしたら回答に直接コメントを
回答1件
0
CSSは置いといて、手元ではひとまず↓は現れました。
ページ番号で表示件数が変わったので、とりあえず動いてるようには見えます。
「３」リンク押下
外部リンク（js、css）が確実にリンクされているか確認してください。
リンクされてなかった場合、ブラウザの開発ツールのコンソールに４０４エラーが出ています。
また今回はプラグインを使用してページネーションの作成を試みているのですが、実際のweb制作の現場でもプラグインでページネーションを使用しているのでしょうか？
それともプラグインを使用せずjQuery(もしくはjavascript)で記述しているのでしょうか？
ケースバイケースと思います（実務のことは外に出せないのでこのような書き方になります）
ページネーションといってもあくまでそういうデータ表示の表現の１つでしかないので、
ユーザーがストレスなく使えればそれで良いです。
今回のプラグインだと１度全てのデータが表示された上でプラグイン側がHTMLの一部を切り取って表示しているように見受けられますので、何万件とある場合には初期表示に時間がかかるように思います。
（表示後は早いと思いますが）
大抵はデータベースからデータを取得するものと思いますので、そもそもその取得時に「１ページ表示件数分しか取得しない」という対応もあります。
あとはページネーションは自前で生成（計算式と必要な情報は決まっているので難しいわけではないです）して、リンクをクリックしたらそのページに該当するデータだけを取得して表示
という形もあります。
いずれも要件次第ですね。
一度のリクエストで全件取ってしまう（前者）
か、
都度リクエストを送って必要件数だけ取る（後者）
の違いです。
投稿2022/03/15 22:18
編集2022/03/15 22:19総合スコア80888
あなたの回答
tips
プレビュー
