In JavaScript, in the part that says to insert my content, only accepts text, and I do not want text, I want the same content, which involves more code as you can see in the HTML file in my attempts. I would like to be able to add content to the pagination, when changing the page both on the buttons with the respective page number and on the buttons to move back and forth from pagination.
$('#pagination-demo').twbsPagination({
totalPages: 5,
visiblePages: 5,
next: 'Next',
prev: 'Prev',
onPageClick: function (event, page) {
//fetch content and render here
$('#page-content').text('xavi ' + page) + ' content here';
$('#page-content2').text('Page ' + page) + ' content here';
$('#page-content3').text('Page ' + page) + ' content here';
$('#page-content4').text('Page ' + page) + ' content here';
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Queue Mu▶️ic</title>
<link rel="icon" href="https://cdn.discordapp.com/attachments/313777707039326209/505754162936545290/circle.png" type="image/png">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--Pagination Links & Scripts ehehe -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<!--Caso queria o css do pag-->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Música
<small>Queue Music</small>
</h1>
<ol class="breadcrumb">
<li><a href="index.html">Inicío</a>
</li>
<li class="active">Música Online</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Service Tabs -->
<div class="row">
<div class="col-lg-12">
<div id="myTabContent" class="tab-content">
<div id="page-content" class="page-content">
<div id="cp_widget_5f5f0989-d967-4574-b543-06baddaa4319">...</div>
<script type="text/javascript">
var cpo = []; cpo["_object"] ="cp_widget_5f5f0989-d967-4574-b543-06baddaa4319"; cpo["_fid"] = "AINA1UOkqTR4";
var _cpmp = _cpmp || []; _cpmp.push(cpo);
(function() { var cp = document.createElement("script"); cp.type = "text/javascript";
cp.async = true; cp.src = "//www.cincopa.com/media-platform/runtime/libasync.js";
var c = document.getElementsByTagName("script")[0];
c.parentNode.insertBefore(cp, c); })();
</script>
<noscript><span>1</span></noscript>
</div>
<div class="tab-pane fade" id="page-content2">
<h4>Download de músicas</h4>
<p>Caso se você gostar da música que está a ouvir, terá ao lado dela um botão de download, no qual irá fazer download da respetiva música.</p>
</div>
<div class="tab-pane fade" id="page-content3">
<h4>Merch</h4>
<p>Esta é uma área especialmente pra fãns.</p>
<p>Nesta plataforma poderá encontrar uma secção chamada <i>Merch</i> no qual irá encontrar nomeadamente roupa acessórios e muito mais relacionadas a determinadas bandas/artistas.</p>
</div>
<div class="tab-pane fade" id="page-content4">
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul id="pagination-demo" class="pagination-sm"></ul>
<li>
<a class="active" href="#">«</a>
</li>
<li class="active">
<a href="#pag-one" data-toggle="tab">1</a>
</li>
<li>
<a href="#pag-two" data-toggle="tab">2</a>
</li>
<li>
<a href="#pag-three" data-toggle="tab">3</a>
</li>
<li>
<a href="#pag-four" data-toggle="tab">4</a>
</li>
<li>
<a href="#pag-five" data-toggle="tab">5</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Queue Music 2018</p>
</div>
</div>
</footer>
</div>
<!-- Js do Pagination -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js'></script>
<script src="js/pag.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>