Мобильная версияКакова причина этого?
Код: Выделить всё
document.addEventListener('DOMContentLoaded', () => {
'use strict';
/**
* Script to handle filtering and pagination out of a list of items
*/
const pagination = (el) => {
const list = el.querySelector('.filter-items');
const searchinput = el.querySelector('.search-input');
const pagination = el.querySelector('.pagination-nav');
const items = Array.from(el.querySelectorAll('.item'));
const pagesize = parseInt(el.dataset.pagesize, 10) || 10;
let filteredItems = items;
let currPage = 1;
/**
* Search by keyword
*/
const searchInput = () => {
const keyword = el.querySelector('input[name=keyword]').value.trim();
if (keyword) {
filteredItems = items.filter(el => {
return el.innerText.indexOf(keyword) > -1;
});
} else {
filteredItems = items;
}
currPage = 1;
if (filteredItems.length !== 0) {
pagination.style.display = 'block';
setHTML(filteredItems);
} else {
pagination.style.display = 'none';
list.innerHTML = 'No data';
}
}
/**
* Search by input
*/
searchinput.addEventListener('keyup', e => {
searchInput();
})
const paginate = (totalItems, currentPage = 1, pageSize = 2, maxPages = 3) => {
let totalPages = Math.ceil(totalItems / pageSize);
if (currentPage < 1) {
currentPage = 1;
} else if (currentPage > totalPages) {
currentPage = totalPages;
}
let startPage, endPage;
if (totalPages startPage + i);
// Add ellipsis after first page
if (startPage > 1) {
pages.unshift(startPage > 1 ? '...' : 2);
pages.unshift(1);
}
// Add ellipsis before last page
if (endPage < totalPages - 1) {
pages.push(endPage < totalPages - 1 ? '...' : totalPages - 1);
}
if (endPage < totalPages) {
pages.push(totalPages);
}
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
const setHTML = (items) => {
list.innerHTML = '';
pagination.innerHTML = '';
const {
totalItems,
currentPage,
pageSize,
totalPages,
startPage,
endPage,
startIndex,
endIndex,
pages
} = paginate(items.length, currPage, pagesize, 3)
const ul = document.createElement('ul');
ul.classList.add('pagination');
let paginationHTML = '';
paginationHTML += `[*][url=#]Previous[/url]`
pages.forEach(page => {
if (currentPage === page) {
paginationHTML += `[*][url=#]${page}[/url]`;
} else if (page === '...') {
paginationHTML += `[*]${page}`;
} else {
paginationHTML += `[*][url=#]${page}[/url]`;
}
})
paginationHTML += `[*][url=#]Next[/url]`
ul.innerHTML = paginationHTML;
pagination.append(ul);
const start = (currentPage - 1) * pageSize,
end = currentPage * pageSize;
items.slice(start, end).forEach(el => {
list.append(el);
});
}
el.addEventListener('click', function(e) {
e.preventDefault();
const $this = e.target;
if ($this.parentNode.classList.contains('page')) {
currPage = parseInt($this.parentNode.getAttribute('data-page'));
setHTML(filteredItems);
}
if ($this.parentNode.classList.contains('next')) {
currPage += 1;
setHTML(filteredItems);
}
if ($this.parentNode.classList.contains('previous')) {
currPage -= 1;
setHTML(filteredItems);
}
});
setHTML(filteredItems);
}
const paginationblock = document.querySelectorAll('.pagination-block');
if (paginationblock) {
Array.from(paginationblock).forEach((el) => {
pagination(el);
});
}
});< /code>
.items {
display: flex;
flex-direction: column;
row-gap: .5rem;
width: 100%;
list-style: none;
padding-left: 0;
}
.item {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 1rem;
padding: .5rem 0;
}
h3 {
margin: 0;
}
.pagination {
display: flex;
list-style-type: none;
column-gap: 0.5rem;
}
.active .page-link {
color: red;
}< /code>
[list]
[*]
Jane Smith
Software Engineer
(123) 456-7890
[*]
John Doe
Project Manager
(987) 654-3210
[*]
John Dough
Project Coordinator
(+45) 6167-3210
[*]
John Dubois
UI Designer
(321) 654-0987
[*]
Jürgen Müller
DevOps Engineer
(654) 321-7890
[*]
Emily Johnson
UX Designer
(555) 123-4567
[*]
Michael Brown
Data Analyst
(444) 987-6543
[*]
Sarah Lee
Marketing Specialist
(222) 333-4444
[*]
David Kim
IT Support Technician
(111) 222-3333
[*]
Linda Martínez
HR Coordinator
(777) 888-9999
[*]
Renée Faure
Legal Advisor
(888) 777-6666
[*]
James Wilson
Network Engineer
(666) 555-4444
[*]
Olívia García
Financial Analyst
(999) 888-7777
[*]
Robert Patel
Product Owner
(333) 444-5555
[*]
Åsa Nordin
Cloud Architect
(212) 343-4545
[*]
Søren Kjær
AI Researcher
(565) 787-8989
[*]
Chloé Moreau
Quality Assurance
(434) 232-1212
[*]
Nikołaj Kowalski
Security Specialist
(555) 666-7777
[*]
André Silva
Scrum Master
(888) 222-1111
[*]
Zoë Chen
Technical Writer
(999) 111-2222
[*]
Frédéric Lemoine
Database Administrator
(444) 123-9876
[*]
Lucas Moretti
Business Analyst
(777) 555-8888
[*]
Mia Hernández
Content Strategist
(666) 444-2222
[*]
Léo Martin
Front-End Developer
(123) 321-1234
[*]
Isabella Rossi
Graphic Designer
(432) 234-5432
[*]
Olivier Dubois
Marketing Manager
(555) 789-0123
[*]
Fatima Al-Hassan
HR Manager
(321) 654-4321
[*]
Tomáš Novák
Software Tester
(654) 987-1234
[*]
Sophia Becker
Customer Success
(789) 456-0987
[*]
Mateo Fernández
Operations Manager
(987) 654-3219
[*]
Amélie Laurent
Sales Representative
(123) 456-6789
[*]
Jan Kowalski
Technical Support
(321) 654-7890
[*]
Yara Haddad
Project Coordinator
(555) 333-2222
[*]
Lucas Thompson
IT Manager
(444) 123-4567
[*]
Ingrid Svensson
Business Development
(777) 987-6543
[*]
Daniela Petrova
Data Scientist
(222) 444-5555
[*]
Akira Tanaka
Software Architect
(111) 555-6666
[*]
Clara Jensen
Content Writer
(888) 999-0000
[/list]
Подробнее здесь: https://stackoverflow.com/questions/796 ... -partially
