Как можно реализовать элементы пагинации с использованием многоточия?

Question

Harper

css , html , javascript

Как можно реализовать элементы пагинации с использованием многоточия?

Добрый день! Я хотел бы создать элементы пагинации с определенным стилем оформления. Можете подсказывать, как это сделать? <br/>

8 октября 2024 г. 12:45

Ответы на вопрос 2

Похожие вопросы

Answer 1

Добрый день! Конечно, давайте реализуем элементы пагинации с многоточием. Это может быть полезно, когда у вас есть большое количество страниц, и вы хотите избежать перегруженности интерфейса, отображая только несколько элементов пагинации и многоточие, когда есть пропуски.

Приведу пример реализации пагинации на HTML и CSS с использованием JavaScript для динамического создания элементов:

### HTML

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пагинация с многоточием</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="pagination" id="pagination"></div>
    
    <script src="script.js"></script>
</body>
</html>
```

### CSS (styles.css)

```css
.pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
}

.pagination a {
    padding: 8px 12px;
    margin: 0 5px;
    text-decoration: none;
    border: 1px solid #007bff;
    color: #007bff;
    border-radius: 4px;
}

.pagination a:hover {
    background-color: #007bff;
    color: white;
}

.disabled {
    color: #ccc;
    pointer-events: none;
}
```

### JavaScript (script.js)

```javascript
const totalPages = 20; // Общее количество страниц
const currentPage = 7; // Текущая страница

function renderPagination(totalPages, currentPage) {
    const paginationElement = document.getElementById('pagination');
    paginationElement.innerHTML = '';

    const createPageLink = (page) => {
        return `<a href="#" class="${page === currentPage ? 'disabled' : ''}">${page}</a>`;
    };

    // Отображаем первую страницу
    if (currentPage > 2) {
        paginationElement.innerHTML += createPageLink(1);
    }

    // Отображаем точки, если пропущены страницы
    if (currentPage > 3) {
        paginationElement.innerHTML += '<span>...</span>';
    }

    // Отображаем страницы перед текущей и саму текущую
    for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
        paginationElement.innerHTML += createPageLink(i);
    }

    // Отображаем точки, если пропущены страницы
    if (currentPage < totalPages - 2) {
        paginationElement.innerHTML += '<span>...</span>';
    }

    // Отображаем последнюю страницу
    if (currentPage < totalPages - 1) {
        paginationElement.innerHTML += createPageLink(totalPages);
    }
}

// Вызов функции для рендеринга пагинации
renderPagination(totalPages, currentPage);
```

### Как это работает:
1. В HTML создается контейнер для пагинации.
2. CSS определяет стиль для элементов пагинации: ссылки, отступы и оформляет состояния при наведении.
3. JavaScript отвечает за логику генерации элементов пагинации:
   - Если текущая страница больше 2, отображается первая страница.
   - Если пропущены страницы, отображается многоточие.
   - Далее выводятся страницы, соседние с текущей (одна до и одна после).
   - В конце, если текущая страница меньше общего количества страниц, отображается последняя страница.

Вы можете легко изменить текущее количество страниц и текущую страницу в JavaScript, и пагинация будет обновляться автоматически.

Answer 2

Надо исправить ошибки. 
 Их много. Например свойство pagination определено 2 раза. 
 Но это не так страшно, javascrpt игнорирует ненужное, 
 type: 'custom', нужно определить в секции pagination, чтобы вообще вызывался собственный рендеринг, вот тогда обнаружится еще одна - const end = current + 1;
        if (current < 2) {
          end += 2 - current;
        }
 Присвоение константе - этого JS уже не прощает... 
 Дальше уже нужно править стили...