Error in paging inside the flap

Question

Error in paging inside the flap

Navigation

#1 by (2 votes)

1

I have a strange problem, in some part of my site I have a tab, but inside one of them there is a pagination, which when it was placed inside the tab did not work and only appeared the buttons previous and next but not the of pages. So I implemented a code in javascript that when I clicked on this specific tab I made it, there the pagination appeared with the two test pages, only that there was another problem, because when I go to another flap and I go back to the page only appears 1 as if it had only one page and I could not understand why it happens, so I turned to you, I'll put all the codes I'm using below.

For pagination I'm 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

CONFIGURING TABS

<script>
  $( function() {
    $( ".tabs-media" ).tabs();
  } );
</script>

PAGING CONFIGURATION BY CLICKING ON ABA 3

<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>

javascript aba

asked by anonymous 05.12.2017 / 17:27

1 answer

Get the value of a string within a PHP variable Calculate two times in a variable in the batch

score 2 · Answer 1

It may be because jPages is already defined (I have not tested). Try it out:

<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 it will look like this:

$('.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
       });
     }
   }
});