Как правильно написать пагинацию на javascript?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

// HTML разметка для отображения пагинации



  var currentPage = 1; // текущая страница
  var totalPages = 10; // всего страниц
  var paginationElement = document.getElementById('pagination');
  
  function renderPagination() {
    paginationElement.innerHTML = '';
    
    // Создаем кнопку "Предыдущая страница"
    var prevButton = document.createElement('button');
    prevButton.innerText = 'Предыдущая';
    prevButton.addEventListener('click', function() {
      if (currentPage > 1) {
        currentPage--;
        renderPagination();
      }
    });
    paginationElement.appendChild(prevButton);
    
    // Создаем кнопки для каждой страницы
    for (var i = 1; i <= totalPages; i++) {
      if (i === currentPage) {
        // Текущая страница выделена активным стилем
        var activeButton = document.createElement('button');
        activeButton.innerText = i;
        activeButton.className = 'active';
        paginationElement.appendChild(activeButton);
      } else {
        // Обработчик события для перехода на определенную страницу
        (function(page) {
          var pageButton = document.createElement('button');
          pageButton.innerText = page;
          pageButton.addEventListener('click', function() {
            currentPage = page;
            renderPagination();
          });
          paginationElement.appendChild(pageButton);
        })(i);
      }
    }
    
    // Создаем кнопку "Следующая страница"
    var nextButton = document.createElement('button');
    nextButton.innerText = 'Следующая';
    nextButton.addEventListener('click', function() {
      if (currentPage < totalPages) {
        currentPage++;
        renderPagination();
      }
    });
    paginationElement.appendChild(nextButton);
  }
  
  // Применяем начальную отрисовку пагинации
  renderPagination();

1

<div id="pagination"></div>