https://eurheilu.org/app/themes/media-theme/assets/js/pagination.js?ver=1.9.4.3

1// mobile in-row layout table script
2
3function processTable( table ) {
4	const thEls = table.querySelectorAll( 'thead th' );
5	const tdLabels = Array.from( thEls ).map( el => el.innerText );
6	const showRows = 2;
7	table.querySelectorAll('tbody tr').forEach( tr => {
8		let rowLength = tr.children.length;
9		Array.from(tr.children).forEach(
10			(td, ndx) => {
11				td.setAttribute('label', tdLabels[ndx])
12
13				if(ndx === showRows){
14					let expandCell = tr.insertCell(ndx);
15					expandCell.className = 'expand';
16					expandCell.innerHTML = `<span class="expand-collapse-btn"><i class="icon icon-chevron-down" aria-hidden="true"></i></span>`;
17					expandCell.addEventListener('click', e => showCollapsed(tr));
18
19				}
20				if(ndx >= showRows){
21					td.classList.add('collapsable', 'hide');
22				}
23				if(ndx === rowLength - 1){
24					let collapseCell = tr.insertCell(ndx + 2);
25					collapseCell.className = 'collapse';
26					collapseCell.innerHTML = `<span class="expand-collapse-btn"><i class="icon icon-chevron-down" aria-hidden="true"></i></span>`;
27					collapseCell.addEventListener('click', e => hideCollapsed(tr));
28
29				}
30			}
31		);
32
33	});
34}
35
36function showCollapsed(tr){
37	Array.from(tr.children).forEach(
38		(td, ndx) => {
39			if(td.classList.contains('collapsable')){
40				td.classList.remove('hide');
41				td.classList.add('show');
42			}
43			if(td.classList.contains('expand')){
44				td.style.display = 'none';
45			}
46			if(td.classList.contains('collapse')){
47				td.style.display = 'flex';
48			}
49
50		}
51	)
52}
53
54function hideCollapsed(tr){
55	Array.from(tr.children).forEach(
56		(td, ndx) => {
57			if(td.classList.contains('collapsable')){
58				td.classList.remove('show');
59				td.classList.add('hide');
60			}
61			if(td.classList.contains('expand')){
62				td.style.display = 'flex';
63			}
64			if(td.classList.contains('collapse')){
65				td.style.display = 'none';
66			}
67
68		}
69	)
70}
71
72function setMobileTable(selector) {
73	tables = typeof selector == "string" ? document.querySelectorAll(selector) : selector;
74
75	for(let table of tables){
76		processTable(table);
77	}
78}
79
80setMobileTable('.wp-table-collapse table');
81
82// pagination script
83
84function addPagerToTables( tables, rowsPerPage = 10 ) {
85	tables =
86		typeof tables == "string"
87	  ? document.querySelectorAll( tables )
88	  : tables;
89
90	for (let table of tables)
91		addPagerToTable(table, rowsPerPage);
92
93}
94
95function addPagerToTable( table, rowsPerPage = 10 ) {
96	let tBodyRows = table.querySelectorAll('tBody tr');
97	let numPages = Math.ceil(tBodyRows.length/rowsPerPage);
98
99	let colCount =
100	[].slice.call(
101		table.querySelector('tr').cells
102	)
103	.reduce((a,b) => a + parseInt(b.colSpan), 0);
104
105	table
106	.createTFoot()
107	.insertRow()
108	.innerHTML = `<td colspan=${colCount}><div class="nav"></div></td>`;
109
110	if(numPages == 1)
111		return;
112
113	for(i = 0;i < numPages;i++) {
114
115		let pageNum = i + 1;
116
117		if (pageNum <= 5 || pageNum === numPages) {
118			table.querySelector('.nav').insertAdjacentHTML('beforeend', `<a class="btn btn-primary" rel="${i}">${pageNum}</a> `);
119			if (pageNum === 1) {
120				table.querySelector('.nav').insertAdjacentHTML('beforeend', `<span class="ellipsis before" style="display:none">...</span> `);
121			}
122		} else {
123			table.querySelector('.nav').insertAdjacentHTML('beforeend', `<a class="btn btn-primary" rel="${i}" style="display:none">${pageNum}</a> `);
124			if (pageNum == numPages - 1){
125				table.querySelector('.nav').insertAdjacentHTML('beforeend', `<span class="ellipsis after">...</span> `);
126			}
127		}
128
129	}
130
131	table.querySelector('.nav')
132		.insertAdjacentHTML(
133			'beforeend',
134			`<a rel="all">${_langData.show}</a> `
135		);
136
137		table.querySelector('.nav').insertAdjacentHTML(
138			'beforeend',
139			`<a rel="hide" style="display: none;">${_langData.hide}</a> `
140		);
141
142	changeToPage(table, 1, rowsPerPage);
143
144	for (let navA of table.querySelectorAll('.nav a')){
145		if(navA.attributes.rel.value === 'all'){
146			navA.addEventListener('click', e => showAllRows(table, rowsPerPage));
147		} else {
148			navA.addEventListener('click', e => changeToPage(table, parseInt(e.target.innerHTML), rowsPerPage));
149		}
150	}
151}
152
153function showAllRows(table, rowsPerPage){
154	let tBodyRows = table.querySelectorAll('tBody tr');
155	for (let trix = 0; trix < tBodyRows.length; trix++){
156		tBodyRows[trix].style.display = 'table-row';
157	}
158
159	for (let navA of table.querySelectorAll('.nav a')){
160		if(navA.attributes.rel.value != 'hide'){
161			navA.style.display = 'none';
162		} else {
163			navA.style.display = 'inline-block';
164			navA.addEventListener('click', e => hideRows(table, rowsPerPage));
165		}
166	}
167
168	for (let ellepsis of table.querySelectorAll('.nav .ellipsis')){
169		ellepsis.style.display = 'none';
170	}
171}
172
173function hideRows(table, rowsPerPage){
174	for (let navA of table.querySelectorAll('.nav a')){
175		if(navA.attributes.rel.value == 'hide'){
176			navA.style.display = 'none';
177		} else if (navA.attributes.rel.value == 'all') {
178			navA.style.display = 'inline-block';
179		} else {
180			navA.style.display = 'inline-block';
181		}
182	}
183
184	changeToPage(table, 1, rowsPerPage);
185
186	table.scrollIntoView();
187}
188
189function checkPagination(table, page, numPages){
190
191	let currentPage = page -1
192	let pageBefore = currentPage - 1;
193	let pageAfter = currentPage + 1;
194
195	let pages = table.querySelectorAll('.nav a.btn');
196
197	pages[0].nextElementSibling.style.display = 'none';
198	pages[pages.length - 1].previousElementSibling.style.display = 'inline-block';
199
200	if(page >= 3){
201		for (i = 0; i < pages.length; i++){
202			if(i === 0 || i === pages.length - 1 || i === currentPage || i === pageAfter || i === pageBefore){
203				pages[i].style.display = "inline-block";
204
205				if(page > 3){
206					pages[0].nextElementSibling.style.display = 'inline-block';
207				}
208
209				if(page >= pages.length - 1){
210					pages[pages.length - 1].previousElementSibling.style.display = 'none';
211				}
212				if(page === pages.length){
213					pages[pageBefore - 1].style.display = "inline-block";
214				}
215
216			} else {
217				pages[i].style.display = "none";
218			}
219		}
220	} else {
221		for (i = 0; i < pages.length; i++){
222			if (i < 3 || i === pages.length - 1){
223				pages[i].style.display = "inline-block";
224			} else {
225				pages[i].style.display = "none";
226			}
227		}
228	}
229}
230
231function changeToPage(table, page, rowsPerPage) {
232
233	let startItem = (page - 1) * rowsPerPage;
234	let endItem = startItem + rowsPerPage;
235	let navAs = table.querySelectorAll('.nav a');
236	let tBodyRows = table.querySelectorAll('tBody tr');
237	let numPages = Math.ceil(tBodyRows.length/rowsPerPage);
238
239	if(numPages > 5) {
240		checkPagination(table, page);
241	}
242
243
244	for (let nix = 0; nix < navAs.length; nix++) {
245
246		if (nix == page - 1)
247			navAs[nix].classList.add('active');
248		else
249			navAs[nix].classList.remove('active');
250
251		for (let trix = 0; trix < tBodyRows.length; trix++)
252			tBodyRows[trix].style.display =
253				(trix >= startItem && trix < endItem)
254				? 'table-row'
255				: 'none';
256
257	}
258
259}
260
261addPagerToTables( '.wp-table-paginate table', 10 );