Dynamic total pages not work

camelys624 commented 1 year ago

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.

Screenshot from 2023-07-17 21-43-49

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.

yasinarabi commented 10 months ago

I have same problem too. It seems that it occured in V1.4.2.

kerembeyazit commented 8 months ago

1.4.1 version is working! Thanks.

josecebe / twbs-pagination

Dynamic total pages not work #201