Элемент вкладки Paginate с помощью Bootstrap - Jquery

Я хотел бы постранично отображать кнопки вкладок bootstrap. Скажем, после 50 кнопок я хотел бы отображать их постранично, чтобы список не был слишком длинным. Пока я нигде не смог найти помощи, поэтому попытался разобраться сам, но не смог достичь своей цели.

ЧТО Я ХОЧУ ДОСТИЧЬ Я размещаю картинку для лучшего понимания: enter image description here

ЧТО Я ДОСТИГ НА ДАННЫЙ МОМЕНТ

let listElement = $(".paginator");
let perPage = 50;
let numItems = document.getElementById("numOfQuestions").value;
let numPages = Math.ceil(numItems / perPage);


$(".pager").data("curr", 0);

let curr = 0;
while (numPages > curr) {
  $('<li><a href="#" class="page_link">' + (curr + 1) + "</a></li>").appendTo(
    ".pager"
  );
  curr++;
}

$(".pager .page_link:first").addClass("active");

listElement.children().css("display", "none");
listElement.children().slice(0, perPage).css("display", "block");

$(".pager li a").click(function () {
  let clickedPage = $(this).html().valueOf() - 1;
  goTo(clickedPage, perPage);
});

function previous() {
  let goToPage = parseInt($(".pager").data("curr")) - 1;
  if ($(".active").prev(".page_link").length == true) {
    goTo(goToPage);
  }
}

function next() {
  goToPage = parseInt($(".pager").data("curr")) + 1;
  if ($(".active_page").next(".page_link").length == true) {
    goTo(goToPage);
  }
}

function goTo(page) {
  let startAt = page * perPage,
    endOn = startAt + perPage;

  listElement
    .children()
    .css("display", "none")
    .slice(startAt, endOn)
    .css("display", "block");
  $(".pager").attr("curr", page);
}
<div class="col-md-3">
                <div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <input type="hidden" name="" id="numOfQuestions" value="{{quizzes.count}}">
                    {% for quiz in quizzes %}
                        <a  class="btn btn-sm btn-outline-secondary paginator custom  m-1 
                        {% for answer in quiz.question_draft.answerdraft_set.all %}
                            {% if answer.is_answered == True and answer.is_correct == True %}bg-success{% endif %}
                        {% endfor %}
                        {% if quiz.question_draft.is_correct == False %}bg-danger{% endif %}
                            {% if forloop.counter == 1 %}active{% endif %} " 
                            id="questionButton{{quiz.question_draft.question.id}}" 
                            data-bs-toggle="pill" href="#question{{quiz.question_draft.question.id}}">{{ forloop.counter }}
                        </a>
                    {% endfor %}
                </div>
                <div class="pagination pagination-large">
                    <ul class="pager"></ul>
                </div>
            </div>

В принципе, я получаю кнопки и данные пагинации работают правильно (я имею в виду, если у меня более 50 кнопок, кнопки пагинации появляются). Но в основном пагинация не работает. Я предполагаю, что должна быть какая-то ошибка в моем css, классе и т.д., работающем вокруг bootstrap.

Вернуться на верх