tabs - DatatablesのTabviewにPaginatorが表示されない

Question

了解しました。タブビューコンテナを含むWebページがあります。コンテナには3つのタブがあります。すべてにデータテーブルが含まれています。各データテーブルは異なります。データテーブル用に設定の下でページネーターを設定すると、すばらしい動作をします。最初のタブにあります。他の2つのタブは、ページネーターのリンク/ボタン/オプションを取得しません。最初のデータテーブルの値を変更すると、他の2つのデータテーブルに反映されます。私が間違っていること、または私ができることについて何か考えはありますか？どうもありがとう！

Answer 1

ええと...私はぐっすり眠ることで自分の質問に答えました。構成変数を作成し、コンテナー プロパティをデータテーブルごとに異なる値に設定する必要があります (例: pagination1、pagination2、pagination3)。HTML マークアップでは、2 つの div コンテナーを作成する必要があります。最初のタグ ID をデータテーブルのコンテナー名に設定し、2 番目のタグ ID をページネーターのコンテナー名に設定する必要があります。

<div class="yui-content">
    <div id="tab1">
        <div id="datatable1" class="yui-dt-nowrap"></div>
        <div id="pagination1"></div>
    </div>
    <div id="tab2">
        <div id="datatable2" class="yui-dt-nowrap"></div>
        <div id="pagination2"></div>
    </div>
    <div id="tab3">
        <div id="datatable3" class="yui-dt-nowrap"></div>
        <div id="pagination3"></div>
    </div>
</div>

---

var configs = {
    paginator: new YAHOO.widget.Paginator({
        rowsPerPage: 25,
        template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
        rowsPerPageOptions: [25,50,100],
        pageLinks: 5,
        containers: "pagination1"
    }), 
    width :"99%", 
    draggableColumns:true, 
    formatRow: descriptionToTitleFormatter
};

var datatable1 = new YAHOO.widget.ScrollingDataTable("datatable1",
    columnTitles, datasource1, configs);

    datatable1.subscribe("rowMouseoverEvent", datatable1.onEventHighlightRow);
    datatable1.subscribe("rowMouseoutEvent", datatable1.onEventUnhighlightRow);
});

configs = {
    paginator: new YAHOO.widget.Paginator({
        rowsPerPage: 25,
        template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
        rowsPerPageOptions: [25,50,100],
        pageLinks: 5,
        containers: "pagination2"
    }), 
    width :"99%", 
    draggableColumns:true, 
    formatRow: descriptionToTitleFormatter
};

var datatable2 = new YAHOO.widget.ScrollingDataTable("datatable2",
    columnTitles, datasource2, configs);

    datatable2.subscribe("rowMouseoverEvent", datatable2.onEventHighlightRow);
    datatable2.subscribe("rowMouseoutEvent", datatable2.onEventUnhighlightRow);
});
... and so on...