https://17radio.org/wp-content/themes/17index/js/paginated-table.js

1//Paginated table
2
3const paginatedTables = document.querySelectorAll('table.paginated');
4
5paginatedTables.length > 0 && paginatedTables.forEach($table => {
6	const $tbody = $table.querySelector('tbody');
7	const $rows = [...$tbody.rows];
8	const totalRows = $tbody.rows.length;
9	const $paginator = $table.parentElement.querySelector('.pagination');
10	const itemsPerPage = +$table.dataset.itemsPerPage;
11	const totalPages = Math.ceil(totalRows / itemsPerPage)
12	let currentRows = $rows;
13
14	function updatePagination(totalPages) {
15		$paginator.innerHTML = '';
16		if (totalPages <= 1) return;
17		for (let i = 0; i < totalPages; ++i) {
18			const pageLink = document.createElement('A');
19			pageLink.href = '#!';
20			pageLink.setAttribute('data-pagenum', i);
21			pageLink.textContent = +i + 1;
22
23			if (i === 0) pageLink.classList.add('active');
24
25			$paginator.appendChild(pageLink);
26		}
27	}
28
29	updatePagination(totalPages);
30
31
32	function updateTable(start) {
33		const startRow = start;
34		const endRow = startRow + itemsPerPage - 1;
35
36		const filteredRows = currentRows.filter((row, index) => index >= startRow && index <= endRow);
37
38		$tbody.innerHTML = '';
39		filteredRows.forEach(row => $tbody.appendChild(row));
40	}
41
42	updateTable(0);
43
44	$paginator.addEventListener('click', e => {
45		if (e.target.tagName !== 'A') return;
46
47		const startRow = +e.target.dataset.pagenum * itemsPerPage;
48
49		updateTable(startRow)
50	})
51
52	/*
53	 * Search filter
54	 */
55	const $search = document.querySelector('#searchintable');
56
57	$search?.addEventListener('input', e => {
58		if (e.target.value.trim() === '') {
59			currentRows = $rows;
60			updateTable(0);
61			updatePagination(totalPages)
62			return;
63		}
64
65		const filterTerm = e.target.value.toLowerCase();
66		const filteredRows = $rows.filter(row => row.textContent.toLowerCase().indexOf(filterTerm) > 0);
67		currentRows = filteredRows;
68
69		updateTable(0);
70		updatePagination(Math.ceil(currentRows.length / itemsPerPage));
71
72	})
73
74	/* 
75	 * Search by date range
76	 */
77	const $searchByDate = document.querySelector('button.searchbydate');
78	$searchByDate?.addEventListener('click', () => {
79		const [sYear, sMonth, sDay] = document.querySelector('.select-month.start').dataset.dateSelected.split('-');
80		const [eYear, eMonth] = document.querySelector('.select-month.end').dataset.dateSelected.split('-');
81
82		const filteredRows = $rows.filter(row => {
83			const [cYear, cMonth, cDay] = row.dataset.eventDate.split('-');
84			const startCalendarDate = new Date(sYear, sMonth - 1, sDay);
85			const endCalendarDate = new Date(eYear, eMonth, 0);
86			const eventDate = new Date(cYear, cMonth - 1, cDay);
87			return startCalendarDate < eventDate && eventDate < endCalendarDate;
88		})
89
90		currentRows = filteredRows;
91		updateTable(0);
92		updatePagination(Math.ceil(currentRows.length / itemsPerPage));
93
94		const $monthsRange = document.querySelector('.months-range');
95		$monthsRange.classList.remove('active');
96	})
97
98	/* 
99	 * Reseat search by date range 
100	 */
101	const $resetSearchByDate = document.querySelector('button.resetdates');
102	$resetSearchByDate?.addEventListener('click', () => {
103		currentRows = $rows;
104
105		updateTable(0);
106		updatePagination(Math.ceil(currentRows.length / itemsPerPage));
107
108		const $monthsRange = document.querySelector('.months-range');
109		$monthsRange.classList.remove('active');
110	})
111
112})