Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dynamic total pages not work #201

Open
camelys624 opened this issue Jul 17, 2023 · 2 comments
Open

Dynamic total pages not work #201

camelys624 opened this issue Jul 17, 2023 · 2 comments

Comments

@camelys624
Copy link

camelys624 commented Jul 17, 2023 •
edited
Loading

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
Copy link

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

@kerembeyazit
Copy link

1.4.1 version is working! Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kerembeyazit @camelys624 @yasinarabi