Как интегрировать бесконечную прокрутку AJAX в Django View

У меня есть представление Django, которое изначально отображает список абитуриентов, а с помощью фильтра по сессии должно отображать список абитуриентов по выбранной учебной сессии. А используя пагинацию, пользователь должен прокручивать страницы с помощью AJAX. Проблема, с которой я столкнулся, заключается в том, что записи повторяются в списке по мере того, как пользователь прокручивает список, и серийные номера также повторяются.

Смотрите код представления Django:

Смотрите JS-код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var currentPage = 1;
  var isLoading = false;
  var hasMorePages = true; // Flag to track if there are more pages
  var totalApplicants = {{ count_submited_applications }}; // Total number of applicants
  var filterData = {}; // Object to store filter parameters (optional)

  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      if (!isLoading && hasMorePages) {
        isLoading = true;
        currentPage++;
        var url = window.location.href.split('?')[0];

        // Add filter parameters to URL (if applicable)
        if (Object.keys(filterData).length > 0) {
          url += '?' + $.param(filterData);
        }

        url += '?page=' + currentPage;
  
      $.ajax({
        url: url,
        type: 'GET',
        dataType: 'html',
        success: function(data) {
          if (data.trim() == "") {
            hasMorePages = false; // No more pages available
          } else {
            // Extract the table body content from the response
            var newEntries = $(data).find('#applicant-list tbody tr');
            var existingEntries = {}; // Object to store loaded entries

            newEntries.each(function() {
              var applicantData = $(this).text(); // Get applicant information (text content)

              // Check if applicant data already exists in loaded entries
              if (!existingEntries.hasOwnProperty(applicantData)) {
                existingEntries[applicantData] = true; // Add to loaded entries
                $('#applicant-list tbody').append($(this));
              }
            });
          }
          isLoading = false;

              // Check if all applicants have been loaded
              var totalLoadedApplicants = $('#applicant-list tbody tr').length;
              if (totalLoadedApplicants >= totalApplicants) {
                hasMorePages = false;
              }
            }
          });
        }
      }
    });
</script>



{% endblock %}

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