title: How to make a dynamic bootstrap pagination with JS?
body: <p>So basically I call on this 840 Json Object dataset with AJAX and display it using divs and a simple enough bootstrap pagination. Now my issue is, that I have 94 pages and all the page buttons are getting displayed all the time. I think that is neither practical, pretty or user-friendly so I'd like to fix that.</p>
  
  <p>So I've scoured the internet about this issue. I've found several pagination plugins supposed to deliver exactly what I need like simplePagination.js or twbsPagination. The latter worked the best for me but still didn't function correctly. I was able to get the new pagination up and running but it would not change the actual page content. I have now tried many more plugins and tried modifying my existing code but nothing worked. I reverted my code back to the normal pagination now.</p>
  
  <pre><code>pageSize = 9;
  
      var pageCount = $(".line-content").length / pageSize 
  //calculating the number of pages needed
      var pagin = document.getElementById('pagin');
  //deleting the previous displayed page buttons
      while (pagin.firstChild) {
          pagin.removeChild(pagin.firstChild);
      }
  
      for (var i = 0; i &lt; pageCount; i++) { 
  //creating the page items
          $("#pagin").append('&lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;' + (i + 1) + '&lt;/a&gt;&lt;/li&gt; ');
      }
  //styling the current page item
      $("#pagin li").first().find("a").addClass("current") 
  
      // the function to actually change the content on the selected page
      showPage = function (page) {
          $(".line-content").hide();
          $(".line-content").each(function (n) {
              if (n &gt;= pageSize * (page - 1) &amp;&amp; n &lt; pageSize * page)
                  $(this).show();
          });
      }
  
      showPage(1); //displaying the content
  
      //changing the style
      $("#pagin li a").click(function () {
          $("#pagin li a").removeClass("current");
          $(this).addClass("current");
          showPage(parseInt($(this).text()))
      });     
  </code></pre>
  
  <p>So basically I got this working pagination but I'd like to get it sleeker. I'm open to any jquery plugins and everything. As long as it does what I hope it can.
  <a href="https://i.stack.imgur.com/RBU5f.png" rel="nofollow noreferrer">My pagination looks like this</a>
  <a href="https://i.stack.imgur.com/GDw7o.png" rel="nofollow noreferrer">I'd like to have it looking somewhat like this</a></p>