I'm using the JPAGES plugin to make paging, but putting it inside a flip made with jquery tab , it crashes and only appears next and previous. So I did a test:
I put the script of the line below
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
After this one of the line below
<script src="js/jquery-ui.min.js"></script>
Then the pagination works only if the tab system does not, I'll put the codes I'm using below. Remembering that I've already found a link about this here on the stack but the application did not work
HTML CODE
<div class="tabs">
<-- CONTROLA AS ABAS -->
<div class="mtabs">
<ul>
<li><a href="#tabs-1" title="ASSOCIADAS DA ÚNICA">ASSOCIADAS DA ÚNICA</a></li>
<li><a href="#tabs-2" title="NOTÍCIAS DAS ASSOCIADAS">NOTÍCIAS DAS ASSOCIADAS</a></li>
</ul>
</div>
<-- CONTEÚDO DAS ABAS -->
<div class="cont-associadas">
<div id="tabs-1" class="config associadas-da-unica"> CONTEÚDO ABA 1</div>
<div id="tabs-2" class="config associadas-da-unica">
<div id="cont-pag" class="cont-pag">CONTEÚDO DA PAGINAÇÃO</div>
<-- PAGINAÇÃO GERADA AUTOMATICAMENTE -->
<nav class="pagination"></nav>
</div>
</div>
</div>
ABAS SYSTEM
<script>
$(".tabs, .tabs2").tabs({
activate: function (event, ui) {
var active = $('#tabs, #tbass').tabs('option', 'active');
ui.newPanel.css("display","flex");
}
}
);
</script>
PAGINATION
<script>
$(function(){
$(".pagination").jPages({
containerID : "cont-pag",
previous : "",
next : "",
perPage : 9,
startPage : 1,
startRange : 1,
midRange : 5,
endRange : 1,
animation : "fadeInUp",
minHeight : false
});
$(".pagination").jPages({
containerID : "cont-pag2",
previous : "",
next : "",
perPage : 15,
startPage : 1,
startRange : 1,
midRange : 5,
endRange : 1,
animation : "fadeInUp",
minHeight : false
});
});
</script>