jquery.pagination.jsでページ番号のリンクを上下に2つ表示したい

Question

下記のサイトで紹介されているページネーション（jquery.pagination.js）の表示位置を、リスト一覧の上下に挟むように変更したいです。

・紹介サイト
https://shanabrian.com/web/jquery/pagination.php
・使用スクリプト
https://shanabrian.com/web/jquery/js/jquery.pagination.js

デモの状態で、

item 1
item 2
item 3
<123456>

となっているのを

<123456>
item 1
item 2
item 3
<123456>

とする方法をご存じの方いらっしゃいましたら、何卒ご教示くださいませ。

Answer 1

ライブラリのオプションとしてはpaginationをどのように差し込むかの選択しかなく、複数設置する事は出来ないようです。

一度初期化後、生成されたpaginationを取得してコピーするのが一つの手段になりそうです。

const items = $('.items').pagination({
    itemElement : '> .item'
});

// 追加されたpagination要素に対し、イベントを含めたコピーを作成
const $pagination = items.next().clone(true);

// リストの手前にコピーしたpaginationを追加
items.before($pagination);

Comments

[nyao]

ご回答誠にありがとうございます。
ご教示いただいたソースを実行し、上下の表示を確認いたしました。
なお動作は問題なく行えましたが、現在のページの指定が片方のみで正常表示される状況でした。
上下で同じ内容が表示されましたら理想通りなのですが…
ブログラムの仕様には含まれてない気がしますが、何か手法がないか模索させていただきます。
諸々ありがとうございました！

[Eggpan]

上下のぺージャーの現在位置のことでしたら、何らかの手段で連動するようなコードを追加する必要があるかと思います。
ライブラリが複数のぺージャーを配置する想定の仕様で作られてないので、ライブラリ自体を改造するか、別ライブラリを利用するほうが良いかと思います。

有名なものだと DataTables などは上下レイアウトに対応しています。ただページャーがほしいだけだと多機能過ぎるかもしれませんが・・。
https://datatables.net/examples/layout/dom_multiple_elements.html

[nyao]

度々のご案内誠にありがとうございます。
ご教示いただきましたプログラムを存じ上げておりませんでしたので、今後様々なカスタマイズを要する際に利用させていただきたいと思います。
この度はありがとうございました！

Answer 2

回答に失敗して2回目です・・
重複していたらごめんなさい。

次のようなオプションがあるようでした。

setPaginationMode 'after' ページネーションを設置する方法。

指定するべき値が何かまで記載されていないようでしたが、
ソースコードを見ると次の4つから指定できるようでした。
after, before, append, prepend
(それぞれjQueryのメソッドに対応しているみたいでした。)

正しい使い方ができているかどうかわかりませんが、
次のように記述すると上下に2つページネーションが表示されることが確認できました。

$('.items').pagination({
    itemElement: '> .item', // アイテムの要素
    setPaginationMode: 'after',
});
$('.items').pagination({
    itemElement: '> .item', // アイテムの要素
    setPaginationMode: 'before',
});

追記です。

コメントありがとうございます。

上で3ページ目を指定した場合でも、下では1ページ目のまま、というような表示でした。

CSSをつけていなかったので気づきませんでした・・
2つつけることは考慮していないのか、オプションでどうにかできるものではなさそうですね・・
独自に制御するとしたら次のような感じになりそうでしょうか。

const $pagination1 = $('.items').pagination({
    itemElement: '> .item', // アイテムの要素
    setPaginationMode: 'after',
    changeEndCallback: () => {
        changeEndCallbackHandler(true)
    },
});
const $pagination2 = $('.items').pagination({
    itemElement: '> .item', // アイテムの要素
    setPaginationMode: 'before',
    changeEndCallback: () => {
        changeEndCallbackHandler(false)
    },
});
// 一方のページネーションの状態が変わったらもう一方のページネーションの状態を変えるための関数です。
function changeEndCallbackHandler(from1To2) {
    const from1 = (from1To2 ? $pagination1 : $pagination2)
    const to1 = (from1To2 ? $pagination2 : $pagination1)
    to1.movePage(from1.getStatus().activePageNumber)
}

Comments

[nyao]

ご回答誠にありがとうございます。
表示位置の仕様に関してもご案内いただき、助かりました。
おかげさまで上下の表示を確認できました。
動作検証を行いましたところ、上下で別々に機能しておりました。
上で3ページ目を指定した場合でも、下では1ページ目のまま、というような表示でした。
取り急ぎ上部に表示したい目標は達成出来ましたので、感謝いたします！

[nyao]

度々のご回答誠にありがとうございます。
ご案内をいただきました内容で、まさに希望通りの動作が確認できました。
ご要望にお応えいただき、誠に感謝申し上げます。
この度は本当にありがとうございました！