Javascript Sort Table Columns
by GPGAgent from LinuxQuestions.org on (#52F1S)
On our Intranet at work I look after a web app that uses a simple html table to display results - nothing complicated, data is retrieved from a SQL database with a simple select statement.
I want to add sorting capability to the table and I have a nice simple Javascript that does it nicely all bar one point - I would like to add an arrow to indicate the sort order.
I also have a complicated Javascript that does add a direction of sort indicator, so i thought I could just lift that bit of code and add into the simple Javascript, but it's beyond me - maybe someone can help - much appreciated.
Here's the simple javascript and html thatworks nicely:
Code:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script>
function sortTable(table, col, reverse) {
var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
i;
reverse = -((+reverse) || -1);
tr = tr.sort(function (a, b) { // sort rows
return reverse // `-1 *` if want opposite order
* (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
.localeCompare(b.cells[col].textContent.trim())
);
});
for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}
function makeSortable(table) {
var th = table.tHead, i;
th && (th = th.rows[0]) && (th = th.cells);
if (th) i = th.length;
else return; // if no `<thead>` then do nothing
while (--i >= 0) (function (i) {
var dir = 1;
th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
}(i));
}
function makeAllSortable(parent) {
parent = parent || document.body;
var t = parent.getElementsByTagName('table'), i = t.length;
while (--i >= 0) makeSortable(t[i]);
}
window.onload = function () {makeAllSortable();};
</script>
</head>
<body>
<H1>Test Sorting table</h1>
<table border=1 cellspacing=0>
<thead>
<tr>
<th>Asset No</th>
<th>Description</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>JKEL03001234</td><td>Emergency Light</td><td>Rm 35</td>
</tr>
<tr>
<td>JKEL03001239</td><td>Emergency Light</td><td>Rm 36</td>
</tr>
<tr>
<td>JKEP01001234</td><td>Emergency Power Off</td><td>Rm 37</td>
</tr>
<tr>
<td>JKED03001234</td><td>Emergency Door</td><td>Rm 38</td>
</tr>
</tbody>
</table>
</body>
</html>And here's a clip of the code from the more complicated Javascript, I think it's the bit that adds an up/down triangle:
Code: sheet.insertRule('table.js-sort-asc thead tr > .js-sort-active:not(.js-sort-none):after {content: "\\25b2";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}', 0);
sheet.insertRule('table.js-sort-desc thead tr > .js-sort-active:not(.js-sort-none):after {content: "\\25bc";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}', 0);Maybe that doesn't help without the complete script, but it's far too long.
I've also attached three screenshots of the desired effect I'm after.
Thanks guys and gals - hope someone can help
Attached Thumbnails
I want to add sorting capability to the table and I have a nice simple Javascript that does it nicely all bar one point - I would like to add an arrow to indicate the sort order.
I also have a complicated Javascript that does add a direction of sort indicator, so i thought I could just lift that bit of code and add into the simple Javascript, but it's beyond me - maybe someone can help - much appreciated.
Here's the simple javascript and html thatworks nicely:
Code:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script>
function sortTable(table, col, reverse) {
var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
i;
reverse = -((+reverse) || -1);
tr = tr.sort(function (a, b) { // sort rows
return reverse // `-1 *` if want opposite order
* (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
.localeCompare(b.cells[col].textContent.trim())
);
});
for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}
function makeSortable(table) {
var th = table.tHead, i;
th && (th = th.rows[0]) && (th = th.cells);
if (th) i = th.length;
else return; // if no `<thead>` then do nothing
while (--i >= 0) (function (i) {
var dir = 1;
th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
}(i));
}
function makeAllSortable(parent) {
parent = parent || document.body;
var t = parent.getElementsByTagName('table'), i = t.length;
while (--i >= 0) makeSortable(t[i]);
}
window.onload = function () {makeAllSortable();};
</script>
</head>
<body>
<H1>Test Sorting table</h1>
<table border=1 cellspacing=0>
<thead>
<tr>
<th>Asset No</th>
<th>Description</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>JKEL03001234</td><td>Emergency Light</td><td>Rm 35</td>
</tr>
<tr>
<td>JKEL03001239</td><td>Emergency Light</td><td>Rm 36</td>
</tr>
<tr>
<td>JKEP01001234</td><td>Emergency Power Off</td><td>Rm 37</td>
</tr>
<tr>
<td>JKED03001234</td><td>Emergency Door</td><td>Rm 38</td>
</tr>
</tbody>
</table>
</body>
</html>And here's a clip of the code from the more complicated Javascript, I think it's the bit that adds an up/down triangle:
Code: sheet.insertRule('table.js-sort-asc thead tr > .js-sort-active:not(.js-sort-none):after {content: "\\25b2";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}', 0);
sheet.insertRule('table.js-sort-desc thead tr > .js-sort-active:not(.js-sort-none):after {content: "\\25bc";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}', 0);Maybe that doesn't help without the complete script, but it's far too long.
I've also attached three screenshots of the desired effect I'm after.
Thanks guys and gals - hope someone can help
Attached Thumbnails