Paginator Not Visible in Tabview for Datatables

Question

Alright, I have a webpage that has a tabview container. The container has three tabs. All of which contain datatables. Each datatable is different. When I setup the paginator for the datatables and under the configs, it works wonderfully. On the first tab that is. The other two tabs do not get links/buttons/options for the paginator. I can change the values on the first datatable and it reflects on the other two datatables. Any idea what I am doing wrong or what I can do? Thank you so much!

Answer 1

Well... I answered my own question with a good nights sleep. You need to create a config var and set the containers property to different values for each datatable (ex: pagination1, pagination2, pagination3). In the HTML markup, you need to create two div containers the first tag id must be set to the container name for the datatable and the second to the container name for the paginator.

<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...