twbs-pagination
twbs-pagination copied to clipboard
Published
20 hours ago •
josecebe
josecebe
Dynamic total pages not work
When I refer to the sample code on the official website to use dynamic total pages, it does not work. the pagination component Iis completely gone.
Here is my code:
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js" integrity="sha512-frFP3ZxLshB4CErXkPVEXnd5ingvYYtYhE5qllGdZmcOlRKNEPbufyupfdSTNmoF5ICaQNO6SenXzOZvoGkiIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="demo"></div>
<input type="number" min="0" id="input">
<button type="button" id="button">Go</button>
</body>
<script>
var $pagination = $('#demo');
var defaultOpts = {
totalPages: 20
};
$pagination.twbsPagination(defaultOpts);
$('#button').click(() => {
const totalPages = document.querySelector('#input').value
var currentPage = $pagination.twbsPagination('getCurrentPage');
$pagination.twbsPagination('destroy');
$pagination.twbsPagination($.extend({}, defaultOpts, {
startPage: currentPage,
totalPages: totalPages
}));
})
</script>
</html>
And I don't see any error messages on the console, then you can see in the html element that the instance has been loaded, but the following element is not rendered.
I tried a lot of things and finally I tried to copy the code inside the jquery.twbsPagination.js file from the official website and it worked!
I hope this helps you if you are experiencing the same problem.
