luis-almeida/jPages

Pagination not working if not in active tab?

Opened this issue · 3 comments

robgnyc commented

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 commented

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 commented

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 commented

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

  • 👍1