pagination - aui-Tabview と aui-Pagination の組み合わせ

Question

YUI スクリプト内で AlloyUI コンポーネントを使用しており、各タブ (ピル) をクリックすると各タブのコンテンツ/ノードリストからページネーションが更新されるように、aui-tabview (ピル) と aui-pagination を組み合わせようとしています。たとえば、tab-2 のノードリストに 7 つの項目がある場合、7 つのページネーション ボタンを取得し、tab-3 の 6 つの項目に 6 つのページネーション ボタンを表示する必要があります。これら 2 つのコンポーネントを統合することはできません。どんな助けでもありがたく受け取られます。

これが私のコードです：

<div id="myTab">
  <ul class="nav nav-pills">
    <li class="active"><a href="#view-all">View all</a></li>
    <li><a href="#beauty">Beauty</a></li>
    <li><a href="#days-out">Days out</a></li>
    <li><a href="#holidays">Holidays</a></li>
  </ul>

  <div class="products tab-content">
    <div id="beauty" class="tab-pane">
      <div>some content</div>
      <div>some more content</div>
      <div>more content</div>
      <div>a few words</div>
    </div>
    <div id="days-out" class="tab-pane">
      <div>some content</div>
      <div>some more content</div>
      <div>more content</div>
      <div>a few words</div>
    </div>
    <div id="holidays" class="tab-pane">
      <div>some content</div>
      <div>some more content</div>
      <div>more content</div>
      <div>a few words</div>
    </div>
  </div>
</div>

    <script>
        YUI({
        }).use('node', 'node-base', 'event', 'transition', 'anim', 'aui-tabview', 'aui-pagination', function(Y) {
            new Y.TabView(
                {
                    srcNode: '#myTab',
                    type: 'pills'
                }
            ).render();

            Y.one(".nav.nav-pills").delegate('click', function(e) {
                var id = Y.one(e.currentTarget);
                var href = id.get('href');
                var arr = href.split("#");
                var target = arr[1];
                var pages = Y.all('#' +target + " > div");
                var total_rows = pages._nodes.length;
                Y.log(total_rows);

                new Y.Pagination(
                    {
                        page: 1,
                        total: total_rows,
                        boundingBox: '#pagination',
                        circular: false,
                        contentBox: '#pagination .pagination-content',
                        on: {
                            changeRequest: function(event) {
                                var instance = this,
                                    current = event.currentTarget,
                                    state = event.state,
                                    lastState = event.lastState;
                                if (lastState) {
                                    pages.item(lastState.page - 1).setStyle('display', 'none');
                                }
                                pages.item(state.page - 1).setStyle('display', 'block');
                            }
                        },
                        after: {
                            changeRequest: function(event) {
                                // goto top
                                a = new Y.Anim(
                                    {
                                        node: 'body',
                                        to: {scrollTop: 0},
                                        duration: 0.4,
                                        easing: Y.Easing.easeOut
                                    }
                                );
                                a.run();
                            }
                        },
                        strings: {
                            next: '&raquo;',
                            prev: '&laquo;'
                        }
                    }
                ).render();

            }, 'a');   
        }
        );
    </script>