title: twbsPagination is not a function
body: <p>The pagination page numbers looks weird and lengthy. I want to display only some of the page numbers in frontend. my code It's working ok, but not good when there's large numbers of pages. so i'm using twbsPagination in function renderPagination. when i run my code i'm getting the error <code>Uncaught TypeError: $(...).twbsPagination is not a function</code>. twbsPagination source is script:src pagination.js. but when i run twbsPagination separate without any function it's working fine. how can i run twbsPagination with my code?</p>
  <p>index.html</p>
  <pre><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot; integrity=&quot;sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css&quot; integrity=&quot;sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==&quot; crossorigin=&quot;anonymous&quot; /&gt;
  
  &lt;script src=&quot;homer/vendor/jquery/dist/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;desk/vendor/pagination/pagination.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;desk/components/approved2.js&quot;&gt;&lt;/script&gt;
  
  &lt;table class=&quot;table&quot;&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
        &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody id=&quot;approvedList&quot;&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;nav aria-label=&quot;Page navigation example&quot;&gt;
    &lt;ul class=&quot;pagination&quot;&gt;&lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>index.js</p>
  <pre><code>const localURL = &quot;http://localhost:8000/&quot;
  // output Html
  const Story = document.querySelector('#approvedList');
  const pagination = document.querySelector('.pagination');
  
  $(function () {
      var page = 1,
          records = 1,
          totalRecords = 0,
          search = '';
  
      // Run on page load
      fetchData();
      setInterval(fetchData, 2000);
  
  
      // data filtering
      $(&quot;#search-input&quot;).keyup(function (e) {
          let value = e.target.value
          fetchData(search = value);
      });
  
      // Show Records limits
      $(&quot;#records&quot;).click(function (e) {
          let value = e.target.value
          fetchData(records = value);
      });
  
      // Previous Page
      $('[aria-label=&quot;Previous&quot;]').click(function () {
          if (page &gt; 1) {
              page--;
          }
          fetchData();
      });
  
      // Next page 
      $('[aria-label=&quot;Next&quot;]').click(function () {
          if (page * records &lt; totalRecords) {
              page++;
          }
          fetchData();
      });
      // data fetching from API
      function fetchData() {
  
          $.ajax({
              url: &quot;http://localhost:8000/api/approved/&quot;,
              type: &quot;GET&quot;,
              data: {
                  page: page,
                  records: records,
                  search: search
              },
              success: function (res) {
                  totalRecords = res.count
                  Story.innerHTML = '';
                  res.results.map((object) =&gt; {
                   
                      Story.innerHTML +=
                          `&lt;tr&gt;
                              &lt;td&gt; ` + object.id + `&lt;/td&gt;           
                              &lt;td&gt;${object.id}` + object.title + `&lt;/td&gt;          
                          &lt;/tr&gt;`;
                  })
                  Pagination();
              }
  
          })
      }
  
      function Pagination() {
          // let pagesNumbers = Math.ceil(totalRecords / records);
          let pagesNumbers = Math.ceil(totalRecords / records);
          $('#pagination').twbsPagination({
              totalPages: pagesNumbers,
              visiblePages: 5,
              onPageClick: function (event, page) {
                  $('#page-content').text('Page ' + page);
              }
          });
      }
  })
  
  </code></pre>