1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- const app = {};
- app.filterTable = function(value) {
- const data = document.getElementById('dataRows');
- const rows = data.getElementsByTagName('tr');
- if (value === '') {
- for (let i = 0; i < rows.length; i++) {
- const row = rows[i];
- row.style.display = '';
- }
- return;
- }
- const filter = value.toUpperCase();
- for (let i = 0; i < rows.length; i++) {
- const row = rows[i];
- row.style.display = 'none';
- const cells = row.getElementsByTagName('td');
- for (let j = 0; j < cells.length; j++) {
- const cell = cells[j];
- if (cell.innerText.toUpperCase().indexOf(filter) > -1) {
- row.style.display = '';
- break;
- }
- }
- }
- };
- app.sorted = ' (sorted)';
- app.clearFilter = function() {
- const filter = document.getElementById('filter');
- filter.value = '';
- app.filterTable('');
- document.querySelectorAll('th').forEach(th => {
- th.textContent = th.textContent.replace(app.sorted, '');
- });
- };
- app.getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
- app.comparer = (idx, asc) => (a, b) => ((v1, v2) =>
- v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
- )(app.getCellValue(asc ? a : b, idx), app.getCellValue(asc ? b : a, idx));
- app.sortTable = function() {
- // borrowed from https://stackoverflow.com/a/49041392/7342859
- document.querySelectorAll('th').forEach(th => th.addEventListener('click', () => {
- const table = document.getElementById('dataRows');
- Array.from(table.querySelectorAll('tr'))
- .sort(app.comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
- .forEach(tr => table.appendChild(tr));
- if (!th.textContent.includes(app.sorted)) {
- th.textContent += app.sorted;
- }
- th.parentNode.childNodes.forEach((child) => {
- if (child !== th) {
- child.textContent = child.textContent.replace(app.sorted, '');
- }
- });
- }));
- };
|