分页器在数据表的 Tabview 中不可见答案

【问题标题】：Paginator Not Visible in Tabview for Datatables分页器在数据表的 Tabview 中不可见
【发布时间】：2012-02-02 17:53:52
【问题描述】：

好的，我有一个包含 tabview 容器的网页。该容器具有三个选项卡。所有这些都包含数据表。每个数据表都是不同的。当我为数据表和配置设置分页器时，它工作得非常好。在第一个选项卡上。其他两个选项卡没有获取分页器的链接/按钮/选项。我可以更改第一个数据表上的值，它会反映在其他两个数据表上。知道我做错了什么或我能做什么吗？非常感谢！

【问题讨论】：

标签： tabs datatable pagination tabview yui2

【解决方案1】：

嗯...我回答了我自己的问题，睡个好觉。您需要创建一个配置变量并将容器属性设置为每个数据表的不同值（例如：pagination1、pagination2、pagination3）。在 HTML 标记中，您需要创建两个 div 容器，第一个标签 id 必须设置为数据表的容器名称，第二个标签 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...

【讨论】：