Multiple pagination on one page with bootstrap tabs

[Stef Emiljanowicz]

Hi,

I'm trying to use keystone js pagination within bootstrap tabs and it's proving to be a bit of a pig. I'm populating the tabs with a filtered keystone list and that works all well and good. The problem is that whilst each filtered category has a different number of pages of content, the 'page' number is retained when I navigate from one tab to another. As a result, if I navigate from say page 3 of one tab to another tab which only has one page of content, I'm left with a blank screen. What I'd like to be able to do is to reset the page number to 1 every time I click on a tab but doing it is difficult. I've tried adding a jquery click event and playing around with the querystring through window.location.search but it appears that keystonejs's pagination component takes precedence over this and whilst the constructed url appears in the location bar at the top of the browser, the empty tab still renders. 

I suspect that the answer to this lies with helpers or modifying the pagination code in helpers/index.js. The ideal would be to be able to send something along the lines of currentPage = 1 from the template back to the helpers/index.js when a tab is clicked so that when the tab content is shown it defaults to the first page.

I suppose what this question boils down to is how do I send a variable from the template to the pagination functions in helpers/index.js and have them reset the current page to 1? I'm using handlebars for my templates.

The only alternative I can think of is to actually have multiple pages with tabs on and set the tab links to go to a new url which is, of course, about as hacky as it gets.

Does anyone have any idea how I might approach this? I can supply code if necessary. I'm holding off from it at this point as there's a lot of it and I'm not 100% sure which bits are actually necessary.

Thanks in advance