Pagination not working if not in active tab?

[robgnyc]

Trying to use jPages on a page with standard bootstrap tabs. The pagination doesn't seem to work if it is located in one of the hidden tabs but does work if it's in the active tab.

Any reason this would be or fixes for it?

[hagar72]

I'm having the same problem
this is because the plugin is working on the visible items only:
this._items = this._container.children(":visible");

[gfcodix]

made it working with changing:

THIS: this._items = this._container.children(":visible");
INTO
THIS: this._items = this._container.children();

Though I think I might have affected other working things in the script it works for me in the tabs.

[katieschrader]

This solution doesn't involve altering the jPages plugin code. You can use the Bootstrap Events to trigger the pagination creation when the tab is shown.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var pagerExist = $(" div.holder a").length
if (pagerExist == 0 ) {
$("div.pagination").jPages({
containerID: "itemContainer"
});
}
});

Bootstrap reference: http://getbootstrap.com/javascript/#tabs