35 lines
1.8 KiB
JavaScript
35 lines
1.8 KiB
JavaScript
import { escapeHtml } from './utils.js';
|
||
|
||
export function renderPagination(container, pageData, { onPage, onSize, label = 'записей' } = {}) {
|
||
if (!container) return;
|
||
const totalItems = Number(pageData?.totalItems || 0);
|
||
const page = Number(pageData?.page || 0);
|
||
const size = Number(pageData?.size || 25);
|
||
const totalPages = Math.max(Number(pageData?.totalPages || 0), totalItems ? 1 : 0);
|
||
const start = totalItems ? page * size + 1 : 0;
|
||
const end = Math.min((page + 1) * size, totalItems);
|
||
|
||
container.innerHTML = `
|
||
<div class="pagination-summary" aria-live="polite">
|
||
Показано ${start}–${end} из ${totalItems} ${escapeHtml(label)}
|
||
</div>
|
||
<div class="pagination-actions">
|
||
<label class="pagination-size">
|
||
<span>На странице</span>
|
||
<select data-pagination-size data-native-select="true">
|
||
${[25, 50, 100].map(value => `<option value="${value}" ${value === size ? 'selected' : ''}>${value}</option>`).join('')}
|
||
</select>
|
||
</label>
|
||
<button type="button" class="btn btn-sm btn-secondary" data-pagination-page="${page - 1}" ${page <= 0 ? 'disabled' : ''}>Назад</button>
|
||
<span class="pagination-page">${totalPages ? page + 1 : 0} / ${totalPages}</span>
|
||
<button type="button" class="btn btn-sm btn-secondary" data-pagination-page="${page + 1}" ${page >= totalPages - 1 ? 'disabled' : ''}>Далее</button>
|
||
</div>
|
||
`;
|
||
container.querySelectorAll('[data-pagination-page]').forEach(button => {
|
||
button.addEventListener('click', () => onPage?.(Number(button.dataset.paginationPage)));
|
||
});
|
||
container.querySelector('[data-pagination-size]')?.addEventListener('change', event => {
|
||
onSize?.(Number(event.target.value));
|
||
});
|
||
}
|