I came to the realization that relying on pre-made solutions often involves a series of imports, including jquery. It's actually much simpler and more efficient to create your own code from scratch, which is exactly what I opted for
Here's a basic example with all class attributes removed for clarity. I've also included a value for the <td> tags, although it's not necessary if you don't have a complex nested structure (e.g. just a <td>value</td>)
<form>
<input placeholder="Search" id="search-in-table" onkeypress="return event.keyCode != 13;">
</form>
<p>Show per page:</p>
<select id="form-select-coins">
<option value="10" selected>10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<table id="coins-table">
<thead>
<tr>
<th>Name</th>
<th>Holdings</th>
<th>Price</th>
<th>Avg. Buy Price</th>
<th>Wallet Balance</th>
<th>Profit/Loss</th>
</tr>
</thead>
<tbody>
<tr coin="COIN">
<td value="COIN">COIN</td>
<td value="TOTAL_COINS">TOTAL_COINS</td>
<td value="CURRENT_PRICE">CURRENT_PRICE</td>
<td value="AVG_BUY_PRICE">AVG_BUY_PRICE</td>
<td value="WALLET_BALANCE">WALLET_BALANCE</td>
<td value="PROFIT_LOSS">PROFIT_LOSS</td>
</tr>
</tbody>
</table>
function hide_table_elements(table_id, visible) {
// Displays only the first `visible` table elements
table_elements = document.getElementById(table_id).children[1].children
for (const element of table_elements) {
if (visible == 0) {
element.style.display = 'none'
}
else {
element.style.display = 'table-row'
visible -= 1
}
}
}
// Use the following function for <td> without `value` attribute
// const getCellValue = (tr, idx) => tr.children[idx].innerText.replace('$', '') || tr.children[idx].textContent.replace('$', '');
const getCellValue = (tr, idx) => tr.children[idx].getAttribute('value')
const comparer = (idx, asc) => (a, b) =>
((v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2))
(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx))
const reload_table = () => hide_table_elements('coins-table', document.getElementById('form-select-coins').value)
window.addEventListener('load', function () {
reload_table()
// Show per page
document.getElementById('form-select-coins').addEventListener('change', function() {
counter = this.value
hide_table_elements('coins-table', this.value)
});
// Search in table
document.getElementById('search-in-table').addEventListener('input', function() {
rows = document.getElementById('coins-table').children[1].querySelectorAll('tr:nth-child(n)')
value = this.value.toLowerCase()
if (value == '')
return reload_table()
for (const row of rows) {
if (row.getAttribute('coin').toLowerCase().includes(value)) {
row.style.display = 'table-row'
} else {
row.style.display = 'none'
}
}
});
// Sort table
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = document.getElementById('coins-table').children[1]
Array.from(table.querySelectorAll('tr:nth-child(n)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr));
reload_table()
})));
});
Creating your own code is cost-effective and efficient. However, if you prefer using readymade solutions, you can explore options here