Error in paging inside tab

Question

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>

Answer 1

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
       });
     }
   }
});