Combining aui-Tabview combined with aui-Pagination - pagination

Question

I'm using AlloyUI components within a YUI script and am trying to combine aui-tabview (Pills) with aui-pagination such that clicking on each tab(pill) updates the pagination from the contents/nodelist for each tab. For example, if there are 7 items in the nodelist for tab-2 then I should get 7 pagination buttons, 6 items for tab-3 should show 6 pagination buttons, etc. I cannot get these two components to integrate. Any help would be gratefully received.
Here is my code:
<div id="myTab">
<ul class="nav nav-pills">
<li class="active">View all</li>
<li>Beauty</li>
<li>Days out</li>
<li>Holidays</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: '»',
prev: '«'
}
}
).render();
}, 'a');
}
);
</script>

Answer 1

Since I've received no answer to the above posting, I've been left with a few days to mull it over and come up with the following solution. Any additions or improvements welcome.
<script>
YUI({}).ready('node', 'event', 'transition', 'anim', 'aui-tabview', 'aui-pagination', function(Y) {
var tabs = '';
var setup = '';
var tabTargetID = '';
tabs = new Y.TabView(
{
srcNode: '#myTab',
type: 'pills'
}
).render();
setup = {
contentId: function() {
if (tabTargetID !== '') {
var content = tabTargetID;
} else {
var id = tabs.getActiveTab();
var href = id.one('a').get('href');
var arr = href.split("#");
var content = '#' + arr[1];
}
return content;
},
pages: function() {
return Y.all(setup.contentId() + " > div");
},
currentTabPageTotal: function() {
return setup.pages()._nodes.length;
}
};
var pages = setup.pages();
var pg = new Y.Pagination(
{
page: 1,
total: setup.currentTabPageTotal(),
boundingBox: '#pagination',
circular: false,
contentBox: '#pagination > ul',
offset: 1,
on: {
changeRequest: function(e) {
var instance = this,
state = e.state,
lastState = e.lastState;
// Set the pagination links active state
Y.all('.pagination > ul > li:not(.pagination-control)').removeClass('active');
var pg_links = Y.all(".pagination > ul > li:not(.pagination-control)");
pg_links.item(state.page - 1).addClass('active');
// Hide all but the focussed tabs 1st paginated page
pages.setStyles({display: 'none', opacity: '0'});
pages.item(state.page - 1).setStyle('display', 'block')
.transition({
opacity: {value: 1, duration: 1}
});
}
},
after: {
changeRequest: function(e) {
// goto top
a = new Y.Anim(
{
node: 'body',
to: {scrollTop: 0},
duration: 0.4,
easing: Y.Easing.easeOut
}
);
a.run();
}
},
strings: {
next: '»',
prev: '«'
}
}
).render();
tabs.on('selectionChange', function(e) {
var tabIndex = tabs.indexOf(e.newVal);
var tabContents = Y.all(".tab-content > div");
var tabTarget = Y.one(tabContents.item(tabIndex));
tabTargetID = '#' + tabTarget.get('id');
pages = setup.pages();
// Hide all but the focussed tabs 1st paginated content
Y.all(tabTargetID + ' > div').setStyles({display: 'none', opacity: '0'});
Y.one(tabTargetID + ' > div').setStyles({display: 'block'})
.transition({
opacity: {value: 1, duration: 1}
});
// For the focussed Tab, build the pagination links with x number of links and set to 1st page
pg.setAttrs({page: 1, total: setup.currentTabPageTotal()});
// Highlight the 1st pagination link
Y.all('.pagination > ul > li:not(.pagination-control)').removeClass('active');
Y.one('.pagination > ul > li:not(.pagination-control)').addClass('active');
});
});
</script>