Реализация пагинации на JavaScript

В данном видео я покажу вам реализацию пагинации на JavaScript. Пагинация представляет собой разбивку некоторой длинной структуры на страницы. К примеру, в нашей задаче у нас будет длинный список пользователей, например, в 100 или 200 штук, а мы не будем показывать их все сразу, а будем выводить по 10 штук на одной странице.

Исходники кода

#table td {
	padding: 10px;
	border: 1px solid black;
}

#pagination {
	display: flex;
	padding: 0;
	list-style-type: none;
}
#pagination li {
	margin-right: 5px;
	padding: 10px;
	border: 1px solid black;
}
#pagination li:hover, #pagination li.active {
	cursor: pointer;
	color: red;
	border: 1px solid red;
}

<table id="table"></table>
<ul id="pagination"></ul>

let users = [
	{name: 'name1',  surname: 'surname1',  age: 30},
	{name: 'name2',  surname: 'surname2',  age: 30},
	{name: 'name3',  surname: 'surname3',  age: 30},
	{name: 'name4',  surname: 'surname4',  age: 30},
	{name: 'name5',  surname: 'surname5',  age: 30},
	{name: 'name6',  surname: 'surname6',  age: 30},
	{name: 'name7',  surname: 'surname7',  age: 30},
	{name: 'name8',  surname: 'surname8',  age: 30},
	{name: 'name9',  surname: 'surname9',  age: 30},
	{name: 'name10', surname: 'surname10', age: 30},
	{name: 'name11', surname: 'surname11', age: 30},
	{name: 'name12', surname: 'surname12', age: 30},
	{name: 'name13', surname: 'surname13', age: 30},
];

let table = document.querySelector('#table');
let pagination = document.querySelector('#pagination');

let notesOnPage = 3;
let countOfItems = Math.ceil(users.length / notesOnPage);

let showPage = (function() {
	let active;
	
	return function(item) {
		if (active) {
			active.classList.remove('active');
		}
		active = item;
		
		item.classList.add('active');
		
		let pageNum = +item.innerHTML;
		
		let start = (pageNum - 1) * notesOnPage;
		let end = start + notesOnPage;
		
		let notes = users.slice(start, end);
		
		table.innerHTML = '';
		for (let note of notes) {
			let tr = document.createElement('tr');
			table.appendChild(tr);
			
			createCell(note.name, tr);
			createCell(note.surname, tr);
			createCell(note.age, tr);
		}
	};
}());

let items = [];
for (let i = 1; i <= countOfItems; i++) {
	let li = document.createElement('li');
	li.innerHTML = i;
	pagination.appendChild(li);
	items.push(li);
}

showPage(items[0]);

for (let item of items) {
	item.addEventListener('click', function() {
		showPage(this);
	});
}

function createCell(text, tr) {
	let td = document.createElement('td');
	td.innerHTML = text;
	tr.appendChild(td);
}