LoginSignup
gantarooou
@gantarooou

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

iQueryのプラグイン実装がうまくできません。

ページネーションを実装したいのですが何を試しても動作しません。

どう記述したらページネーションプラグインが動くのか教えていただきたいです。

例)
html、jQuery(jquery-3.6.0.min.js)、ページネーションプラグイン(paginathing.min.js)、自作のjQueryファイル(script.js)を使用してwebページを作成しています。
上記のファイルを使用してページネーションを実装したいです。

発生している問題・エラー

Google Chromeの検証ツールのconsoleに画像に示すエラーが表示されています。ページネーションも動作していません。

page.PNG

folder.PNG

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

  1. @gantarooou

    Questioner
    全く違っていました。
    プラグインを使用するのは初めてとはいえ恥ずかしいくらいの間違いでした。
    教えていただいたとおりに記述したらページネーション実装出来ました。
    本当にありがとうございます。
  2. きっとこの履歴が役に立つ人もいますから、恥ずかしくても残しておいてくださいね。聞くは一時の恥、聞かぬは一生の恥です。

掲載のソースコードで試してみましたがエラーは出ませんでした。unexpected token '<'という構文エラーがpaginathing.min.js周辺で出ていますが、ソースコードの取得元はどちらでしょうか?githubのソースからダウンロードし直してみるといいと思います。

ちなみに、jqueryの本体はCDNに配布されているのでこちらを使用することもできます。

0

Comments

  1. @gantarooou

    Questioner
    回答ありがとうございます。
    再度githubからソースをダウンロードし、本体もCDNから読み込んでみましたがやはりうまくできませんでした。

いただいたコードを打ち込んでみましたが、変わらずでした。
paginathing.min.jsでエラーが出ているのですが、これはみんな同じなのでしょうか。
githubからダウンロードしたファイルをそのまま使用しているのですが。
code.PNG

0

スクショの内容は下記ページのHTMLソースと合致しているので、ファイルをダウンロードする手順が誤っているのだと思います。

おそらく Github のリンク上で右クリックメニューから「リンク先を保存」を実行したのではないでしょうか?この場合ファイル名は「paginathing.min.js」にはなりますがファイルの内容は "ページの HTML" になるので JavaScript として実行できません。

image.png

Raw からであれば「リンク先を保存」で目的のファイルがダウンロードできます。

image.png

0

Comments

  1. @gantarooou

    Questioner
    ご指摘の通り名前をつけてリンク先を保存していました。
    以前iQueryの本体をダウンロードした時も同様の手順で行っていたので、今回もそれでうまくいくと思っていました。
    教えていただいてありがとうございます。

Your answer might help someone💌