このスクショがpaginathing.min.jsの中身ですか？全然jsじゃないんですが。笑
これですよ。https://github.com/alfrcr/paginathing/blob/master/paginathing.min.js
「view raw」を押して、ソースコードをコピペすれば良いです
1Like
iQueryのプラグイン実装がうまくできません。
ページネーションを実装したいのですが何を試しても動作しません。
どう記述したらページネーションプラグインが動くのか教えていただきたいです。
例）
html、jQuery(jquery-3.6.0.min.js)、ページネーションプラグイン(paginathing.min.js)、自作のjQueryファイル(script.js)を使用してwebページを作成しています。
上記のファイルを使用してページネーションを実装したいです。
発生している問題・エラー
Google Chromeの検証ツールのconsoleに画像に示すエラーが表示されています。ページネーションも動作していません。
html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="paginathing.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="test">
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
<dl>
<dt>title</dt>
<dd>content</dd>
</dl>
</div>
</body>
</html>
script.js
$(function() {
$('.test').paginathing({
perPage: 5,
prevText:'前へ',
nextText:'次へ',
activeClass: 'navi-active',
})
});
自分で試したこと
プラグインの記述方法をページネーションを使用している他サイトを参考にして調べた。
paginathing.min.jsではなくpaginathing.jsにプラグインを切り替えてみた。
リンクの記述方法が間違っているのかと思い、script.js内に別の簡単な関数を記述してみたところその関数は動作しました。
現在疑っていることはjQuery本体(jquery-3.6.0.min.js)ではページネーションプラグイン(paginathing.min.jsもしくはpaginathing.min.js)が使用できないのかと思っているのですが、それについてネットの記事が見つかりません。
どなたか解決方法を教えてください。
0
4Answer
Comments
@gantarooou
Questioner全く違っていました。
プラグインを使用するのは初めてとはいえ恥ずかしいくらいの間違いでした。
教えていただいたとおりに記述したらページネーション実装出来ました。
本当にありがとうございます。- よかったです！
- きっとこの履歴が役に立つ人もいますから、恥ずかしくても残しておいてくださいね。聞くは一時の恥、聞かぬは一生の恥です。
0Like
Comments
@gantarooou
Questioner回答ありがとうございます。
再度githubからソースをダウンロードし、本体もＣＤＮから読み込んでみましたがやはりうまくできませんでした。- こちらと差分を確認してみてください。jqueryにCDNを使っているのと、scriptタグをbody内で読み込んでいる以外は一緒のはずですが。
https://codesandbox.io/s/trusting-hill-xrh7cp?file=/index.html
いただいたコードを打ち込んでみましたが、変わらずでした。
paginathing.min.jsでエラーが出ているのですが、これはみんな同じなのでしょうか。
githubからダウンロードしたファイルをそのまま使用しているのですが。
0Like
スクショの内容は下記ページのHTMLソースと合致しているので、ファイルをダウンロードする手順が誤っているのだと思います。
おそらく Github のリンク上で右クリックメニューから「リンク先を保存」を実行したのではないでしょうか？この場合ファイル名は「paginathing.min.js」にはなりますがファイルの内容は "ページの HTML" になるので JavaScript として実行できません。
Raw からであれば「リンク先を保存」で目的のファイルがダウンロードできます。
0Like
Comments
@gantarooou
Questionerご指摘の通り名前をつけてリンク先を保存していました。
以前iQueryの本体をダウンロードした時も同様の手順で行っていたので、今回もそれでうまくいくと思っていました。
教えていただいてありがとうございます。