Code phân trang comment blogger

<style>
.boxContainer{max-width:800px;margin:20px auto}.comment{display:flex;align-items:center;border:1px solid #ddd;padding:15px;margin-bottom:20px;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);opacity:0;transform:translateY(20px);transition:opacity 0.3s ease,transform 0.3s ease;overflow:hidden}.comment img{width:60px;height:60px;border-radius:50%;margin-right:15px;margin-left:0}.comment p{margin:0;flex:1}.comment strong{color:#007bff}.comment a{color:#007bff;text-decoration:none;display:inline-block;margin-top:10px}.comment a:hover{text-decoration:underline}#pagination{text-align:center}.pagination{display:flex;justify-content:center;margin-top:20px}.pagination-link{display:inline-block;padding:8px 16px;margin:0 4px;border:1px solid #007bff;border-radius:4px;color:#007bff;text-decoration:none;cursor:pointer;transition:background-color 0.3s ease}.pagination-link:hover{background-color:#007bff;color:#fff}.pagination-link.active{background-color:#007bff;color:#fff}
</style>
<div class="boxContainer">
  <div id="commentsContainer"></div>
  <div id="pagination"></div>
</div>
<script>
  window.addEventListener('load', function() {
    const COMMENTS_PER_PAGE = 5;
    const AVATAR_SIZE = 60;
    let currentPage = 1;
    let isLoading = false;

    function getAuthorAvatar(comment) {
      const authorAvatar = comment.author[0].gd$image.src;
      if ("https://img1.blogblog.com/img/b16-rounded.gif" !== authorAvatar && "https://img1.blogblog.com/img/blank.gif" !== authorAvatar) {
        return authorAvatar.replace("s512-c", `s${AVATAR_SIZE}-c`);
      } else {
        return `https://lh3.googleusercontent.com/-tsJltTo4SGc/Zh3fciGEgWI/AAAAAAAAffc/uJd8nC81OxAiQx64pztsCUdbZ5y1tYGdQCNcBGAsYHQ/h120/no-avatar.jpg`;
      }
    }

    function updatePagination(totalPages) {
      const maxVisiblePages = 5;
      let paginationHTML = '';
      const startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
      const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
      if (currentPage > 1) {
        paginationHTML += '<span class="pagination-link" data-page="1">Đầu trang</span> ';
      }
      if (startPage > 1) {
        paginationHTML += '<span class="pagination-link" data-page="1">1</span> ';
        if (startPage > 2) {
          paginationHTML += '<span>...</span> ';
        }
      }
      for (let i = startPage; i <= endPage; i++) {
        const isActive = i === currentPage ? 'active' : '';
        paginationHTML += `<span class="pagination-link ${isActive}" data-page="${i}">${i}</span> `;
      }
      if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
          paginationHTML += '<span>...</span> ';
        }
        paginationHTML += `<span class="pagination-link" data-page="${totalPages}">${totalPages}</span> `;
      }
      if (currentPage < totalPages) {
        paginationHTML += `<span class="pagination-link" data-page="${totalPages}">Cuối trang</span>`;
      }
      $('#pagination').html(paginationHTML);
      $('.pagination-link').on('click', function() {
        currentPage = parseInt($(this).data('page'));
        loadComments();
      });
    }

    function loadComments() {
      if (isLoading) return;
      isLoading = true;
      $('#loadingIndicator').show();
      const startIndex = (currentPage - 1) * COMMENTS_PER_PAGE + 1;
      const apiUrl = '/feeds/comments/default?alt=json-in-script&max-results=' + COMMENTS_PER_PAGE + '&start-index=' + startIndex;
      $.ajax({
        url: apiUrl,
        type: 'GET',
        dataType: 'jsonp',
        success: function(data) {
          handleComments(data);
        },
        error: function(error) {
          handleError(error);
        }
      });
    }

    function handleComments(data) {
      const comments = data.feed.entry;
      const totalComments = parseInt(data.feed.openSearch$totalResults.$t);
      const totalPages = Math.ceil(totalComments / COMMENTS_PER_PAGE);
      if (comments.length > 0) {
        $('#commentsContainer').empty(); // Clear existing comments
        for (let i = 0; i < comments.length; i++) {
          const comment = comments[i];
          const authorName = comment.author[0].name.$t;
          const authorAvatar = getAuthorAvatar(comment);
          const commentContent = comment.content.$t;
          const commentLink = comment.link[2].href;
          // Append each comment to the comments container
          const commentElement = $(`
            <div class="comment">
              <img src="${authorAvatar}" alt="Avatar">
              <p><strong>${authorName}</strong>: ${commentContent}</p>
              <a href="${commentLink}" target="_blank">Link bài</a>
            </div>
          `);
          commentElement.appendTo('#commentsContainer').css({
            opacity: 1,
            transform: 'translateY(0)'
          });
        }
        updatePagination(totalPages);
      } else {
        // Ẩn nút "Load more" nếu không còn comment
        $('#loadMoreBtn').hide();
      }
      isLoading = false;
      $('#loadingIndicator').hide();
    }

    function handleError(error) {
      console.error('Error loading comments:', error.responseText);
      isLoading = false;
      $('#loadingIndicator').hide();
    }
    // Bắt đầu tải comment
    loadComments();
  });
</script>