Error in paging inside tab

Asked

Viewed 75 times

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>

1 answer

2

This may be because jPages (not tested) is already defined. Try:

<script>  
$(document).ready(function(){
    $(".press").on('click',function(){
        if ($(".pagination").jPages()) {
            $(".pagination").jPages("destroy");
        }
        $(".pagination").jPages({
            containerID  : "content",
            previous     : "PREVIOUS",
            next         : "NEXT",
            perPage      : 10,
            startPage    : 1,
            startRange   : 1,
            midRange     : 5,
            endRange     : 1
        });
    });
 });
</script>

to put this when selecting the tab I think will be so:

$('.tabs-media').tabs({
   select: function(event, ui){
     var myTabIndex = 3; // indice da tab a executar
     if(ui.index == myTabIndex ) {
       if ($(".pagination").jPages()) {
          $(".pagination").jPages("destroy");
       }
       $(".pagination").jPages({
          containerID  : "content",
          previous     : "PREVIOUS",
          next         : "NEXT",
          perPage      : 10,
          startPage    : 1,
          startRange   : 1,
          midRange     : 5,
          endRange     : 1
       });
     }
   }
});
  • I’ll try here vlw

  • 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

  • I edited in my reply how you can do by clicking on the tab

  • 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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.