1
I have a strange problem, in a certain part of my site I have a tab, only within one of them there is a pagination, which when it was placed inside the tab did not work and only appeared the Previous and next buttons but not those of the pages. So I implemented a javascript code that when I clicked on this specific tab it was, then the pagination appeared with the two test pages, only then another problem arose, because when I go to another tab and go back to the one of the pagination only appears number 1 as if it had only one page and I could not understand why this happens, so I went to you, I will put all the codes I am using below.
For paging I am using the JPAGES plugin JPAGES LINK
HTML ABA + PAGINATION
<div class="tabs-media">
<!--aba-->
<ul>
<li><a href="#media-1">media1</a></li>
<li><a href="#media-2">media3</a></li>
<li><a href="#media-3" class="press">media3</a></li> <!--CLASS PRESS UTILIZADA PARA INTRODUZIR PAGINAÇÃO-->
</ul>
<!--conteudo da aba-->
<section id="media-1">
conteudo1
</section>
<section id="media-2">
CONTEUDO 2
</section>
<section id="media-3"> <!--ABA ONDE É INSERIDA A PAGINAÇÃO-->
<div id="content"> <!--ID CONTENT INDICA ONDE FICA O CONTEÚDO DA PAGINAÇÃO-->
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque erat at neque pretium dapibus.. </div>
</div>
<nav class="pagination">
<a href="#" class="jp-previous" title="PREVIOUS">PREVIOUS</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#" class="jp-next" title="NEXT">NEXT</a>
</nav>
</section>
JAVASCRIPT CODES
TABS CONFIGURATION
<script>
$( function() {
$( ".tabs-media" ).tabs();
} );
</script>
PAGINATION CONFIGURATION WHEN CLICKING ON THE 3 TAB
<script>
$(document).ready(function(){
$(".press").click(function(){
$(".pagination").jPages({
containerID : "content",
previous : "PREVIOUS",
next : "NEXT",
perPage : 10,
startPage : 1,
startRange : 1,
midRange : 5,
endRange : 1
});
});
});
</script>
I’ll try here vlw
– user4451
Perfect the first option worked, I wanted to ask if you have how to do this when you click on the tab instead of just doing this on the press button, because then I just put a javascript code for all Wordpress site? I will edit in your code as is the original
– user4451
I edited in my reply how you can do by clicking on the tab
– Rui Ferreira
I put this its edited form and it happens that now instead of appearing only two records in the pagination, appears 10, and you can not click any of them
– user4451