質問するログイン新規登録

回答編集履歴

1

コードを追記しました。

2024/07/14 03:57

投稿

退会済みユーザー
answer CHANGED
@@ -24,3 +24,37 @@
24
24
  setPaginationMode: 'before',
25
25
  });
26
26
  ```
27
+
28
+
29
+ ### 追記です。
30
+
31
+ コメントありがとうございます。
32
+
33
+ > 上で3ページ目を指定した場合でも、下では1ページ目のまま、というような表示でした。
34
+
35
+ CSSをつけていなかったので気づきませんでした・・
36
+ 2つつけることは考慮していないのか、オプションでどうにかできるものではなさそうですね・・
37
+ 独自に制御するとしたら次のような感じになりそうでしょうか。
38
+
39
+ ```js
40
+ const $pagination1 = $('.items').pagination({
41
+ itemElement: '> .item', // アイテムの要素
42
+ setPaginationMode: 'after',
43
+ changeEndCallback: () => {
44
+ changeEndCallbackHandler(true)
45
+ },
46
+ });
47
+ const $pagination2 = $('.items').pagination({
48
+ itemElement: '> .item', // アイテムの要素
49
+ setPaginationMode: 'before',
50
+ changeEndCallback: () => {
51
+ changeEndCallbackHandler(false)
52
+ },
53
+ });
54
+ // 一方のページネーションの状態が変わったらもう一方のページネーションの状態を変えるための関数です。
55
+ function changeEndCallbackHandler(from1To2) {
56
+ const from1 = (from1To2 ? $pagination1 : $pagination2)
57
+ const to1 = (from1To2 ? $pagination2 : $pagination1)
58
+ to1.movePage(from1.getStatus().activePageNumber)
59
+ }
60
+ ```