jQuery Pagination.js でページネーションを２つ設置したい

Question

お世話になっております。

jQuery Pagination.js で、ページネーションを、コンテンツをはさんで上下に２つ設置しようと思っています。

$('#pagination1, #pagination2').pagination({
		dataSource: works,
		pageSize: 5,
		prevText: 'NEXT',
		nextText: 'PREV',
		callback: function(data, pagination) {
			$('.p-works_list').html(template(data)); 
		}
});

２つとも表示されるのですが、
２つ目のページネーションしか正しく動作してくれません。

１つ目のページネーションをクリックしても、ページ移動してくれず、リロードされるだけの状態になっております。

$('#pagination1').pagination({
		dataSource: works,
		pageSize: 5,
		prevText: 'NEXT',
		nextText: 'PREV',
		callback: function(data, pagination) {
			$('.p-works_list').html(template(data)); 
		}
});
$('#pagination2').pagination({
		dataSource: works,
		pageSize: 5,
		prevText: 'NEXT',
		nextText: 'PREV',
		callback: function(data, pagination) {
			$('.p-works_list').html(template(data)); 
		}
});

２つ分けて記述すると、２つとも該当ページへ移動してくれるのですが、
クリックされていない方のページネーションのページ番号が、実際のページが反映されないという結果になりました。

どちらをクリックしても正しく移動し、正しいページ番号を反映させるにはどのようにしたらよろしいのでしょうか。

よろしくお願いいたします。

バージョン

Pagination.js2.1.5

htmlのソースを掲載し忘れました。追記します。

<div id="pagination1"></div>
<ul class=".p-works_list"></ul>
<div id="pagination2"></div>

Comments

[FKM]

html側の提示もお願いします。

[seiroku55]

あ、失礼いたしました！
ご指摘ありがとうございます。

Answer 1

eachメソッドでセレクタを明示すればいけますよ。検証済みです

$('#pagination1, #pagination2').each(function(){
	$(this).pagination({
        dataSource: works,
        pageSize: 5,
        prevText: 'NEXT',
        nextText: 'PREV',
        callback: function(data, pagination) {
			console.log(template(data));
			$('.p-work-list').empty();
            $('.p-work-list').append(template(data)); 
        }
	})
});

Comments

[seiroku55]

ありがとうございます。そういうことだったのですね。勉強になりました。

ページの移動は上下ともにできるようになったのですが、、、
やはり、上で２ページ目をクリックし、２ページ目に移動すると、
下のページネーションは１ページ目にいる状態のままになってしまいました。

このような記述を追加したら、移動と連動どちらもできました
```
$('#pagination1').addHook('afterRender', function () {
$('#pagination2').html($('#pagination1').html());
});
$('#pagination2').addHook('afterRender', function () {
$('#pagination1').html($('#pagination2').html());
});
```