上下にページネーションを設置する方法について教えてくださいm(_

現在、paginathing.min.js を用いてページネーション（ページ送り）を作成しています。

pagenation.min.js
https://www.omakase.net/blog/2021/04/paginathingjs.html

【現状】
paginathing.min.jsを活用することで、
10個のコンテンツを4つずつ３ページに分けることが出来たのですが、
ページネーション自体がどうしても１つしかつけることが出来ません。
【現状のコード】

HTML
1　<div class="pagenation"></div>
2  <div class="list-group">
3         <div class="result_item"></div>
4         <div class="result_item"></div>
5         <div class="result_item"></div>
6         <div class="result_item"></div>
7         <div class="result_item"></div>
8         <div class="result_item"></div>
9         <div class="result_item"></div>
10         <div class="result_item"></div>
11         <div class="result_item"></div>
12         <div class="result_item"></div>
13    </div>

Jquery
1$('.list-group').paginathing({
2      perPage: 4,
3      firstLast: false,
4      prevText:'＜' ,
5      nextText:'＞' ,
6      activeClass: 'page-active',
7     insertAfter:'.pagenation',　
8});

【行ったこと】
jqueryプラグインに慣れておらず、調べているのですが、動作しなくなったりしてしまいました。
具体的には、insertAfterにclassを列挙してみたり、each文を書いてみたりしました。

【実現したいこと】
現在、HTML上部にあるpagenationにページネーションが設置されていますが、
下部にも設置したいです。

pagenation1 ←ここは設置出来ました
（コンテンツ）
pagenation2　　←ここが出来ません、、

というイメージです。

方法をご存知の方に、ヒントをいただけましたら幸いです。
何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

冗長的かもしれませんが、
下側にも表示されるように、
要素と処理を追加してあげる感じはどうでしょうか。

html
1<meta charset="utf-8">
2<!-- jQuery first -->
3<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
4<!-- paginathing.js -->
5<script type="text/javascript" src="paginathing.js"></script>
6<div class="pagenation"></div>
7<div class="list-group">
8    <div class="result_item">Item 1</div>
9    <div class="result_item">Item 2</div>
10    <div class="result_item">Item 3</div>
11    <div class="result_item">Item 4</div>
12    <div class="result_item">Item 5</div>
13    <div class="result_item">Item 6</div>
14    <div class="result_item">Item 7</div>
15    <div class="result_item">Item 8</div>
16    <div class="result_item">Item 9</div>
17    <div class="result_item">Item 10</div>
18</div>
19<div class="pagination2"></div><!-- 追加 -->
20<script>
21    $('.list-group').paginathing({
22        perPage: 4,
23        firstLast: false,
24        prevText: '＜',
25        nextText: '＞',
26        activeClass: 'page-active',
27        insertAfter: '.pagenation',
28    });
29    // 追加
30    $('.list-group').paginathing({
31        perPage: 4,
32        firstLast: false,
33        prevText: '＜',
34        nextText: '＞',
35        activeClass: 'page-active',
36        insertAfter: '.pagination2',
37    });
38</script>