Isolating events in Angular 1.5 Component Instances

Isolating events in Angular 1.5 Component Instances - javascript

I've created a component which is being used to add "data grid" functionality to HTML tables. The headers are clickable to allow sorting of the data (ascending/descending) on that column. So far it's working great unless I have two instances of the component on the same page. When I click a header in one table, it affects both tables.
Is there a way I'm missing to isolate the component's events to only affect that instance?
Component:
angular.module('app')
.component('datagrid', {
templateUrl:'components/datagrids/datagrids.component.html',
controller:DatagridController,
})
Controller (Work in progress, I know It's a bit of a mess at the moment!):
function DatagridController($filter, datagridService){
var ctrl = this;
ctrl.today = new Date();
ctrl.sortBy = null;
ctrl.fields = [];
ctrl.data = [];
ctrl.update = function(){
var service = datagridService;
console.log(datagridService);
var updatedFields = [];
console.log(datagridService.fields);
for(var i = 0; i < datagridService.fields.length; i++){
var fieldName = datagridService.fields[i];
var fieldDirection = (ctrl.fields.length === 0) ? 'ascending' : ctrl.fields[i].direction;
updatedFields.push({name:fieldName, direction:fieldDirection});
}
ctrl.fields = updatedFields;
console.log(ctrl.fields)
if (ctrl.sortBy == null){ ctrl.sortBy = $filter('toCamelCase')(ctrl.fields[0].name); }
ctrl.data = datagridService.data.sort(ctrl.sortData(ctrl.sortBy));
ctrl.today = new Date();
};
ctrl.sortData = function(field, reverse, primer){
console.log(field + ' | ' + reverse)
var key = primer ?
function(x) {return primer(x[field])} :
function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
ctrl.sortBy = field;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
};
ctrl.toggleSortDirection = function(index){
console.log(index);
var field = ctrl.fields[index];
console.log(field);
var fieldName = field.name;
console.log(fieldName);
var direction = ctrl.fields[index].direction;
console.log(direction);
var reverse = (direction == 'ascending') ? true : false;
console.log(reverse);
var direction = (direction === 'ascending') ? 'descending' : 'ascending';
console.log(direction);
for(var i = 0; i < ctrl.fields.length; i++){
ctrl.fields[i].direction = 'ascending';
}
ctrl.fields[index].direction = direction;
ctrl.data.sort(ctrl.sortData($filter('toCamelCase')(fieldName), reverse));
};
ctrl.validDatetime = function(dt){
//this should probably be a service
console.log(dt);
var rx = /([0-9]{4})\-([0-9]{2})\-([0-9]{2})/;
if(dt.match(rx)){ console.log(dt); }
return (dt.match(rx)) ? true : false;
};
ctrl.$onInit = ctrl.update();
}
DatagridController.$inject = ['$filter', 'datagridService'];
Template:
<table ng-if="$ctrl.data.length > 0" class="datagrid">
<caption ng-if="$ctrl.caption">{{ $ctrl.caption }}</caption>
<colgroup ng-if="$ctrl.colgroup.length > 0">
<col ng-repeat="col in $ctrl.colgroup">
</colgroup>
<thead ng-if="$ctrl.hasHeader = true">
<tr>
<th ng-repeat="field in $ctrl.fields" ng-click="$ctrl.toggleSortDirection($index)" data-sortable="true">{{ field.name }}<div ng-class="field.direction"></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in $ctrl.data">
<td ng-repeat="field in $ctrl.fields">
<span ng-if="!$ctrl.validDatetime(record[(field.name|toCamelCase)])"><a>{{ record[(field.name|toCamelCase)] }}</a></span>
<span ng-if="$ctrl.validDatetime(record[(field.name|toCamelCase)])"><a>{{ record[(field.name|toCamelCase)] | date: 'dd-MMM-yyyy' }}</a></span>
</td>
</tr>
</tbody>
<tfoot ng-if="$ctrl.hasFooter = true">
<td colspan="{{ $ctrl.fields.length }}">Last Updated: {{ $ctrl.today | date: 'dd-MMM-yyyy' }}</td>
</tfoot>
</table>
Component Tag:
<datagrid></datagrid>

Components are isolated by default, which means there is its own $ctr for every instance.
Thing is that data is shared through service. For example you do datagridService.data.sort in first instance => it changes data in service => it gets reflected in all instances of your component (there is one data object in memory, that you are trying to access).
One fix might be, to make copies of data for every component instance.
ctrl.data = Object.assign([], datagridService.data);
Dont do any manipulation directly on datagridService.data, but use ctrl.data instead

Related

Sort a table- Number, Name and more [duplicate]

I'm after a table sorting solution (in JavaScript) but I can't seem to find a suitable one yet. I just need it to sort each column alphabetically. It doesn't need to ignore any code or any numbers or to work with currency. Just a click on the column header switches it from sorted a-z/z-a.
Does anyone know of a really simple solution like this?

Just revisiting an old solution, I thought I'd give it a facelift for it's ~5 year anniversary!
Plain Javascript (ES6)
Does alpha and numeric sorting - ascending and descending
Works in Chrome, Firefox, Safari (and IE11, see below)
Quick explanation
add a click event to all header (th) cells...
for the current table, find all rows (except the first)...
sort the rows, based on the value of the clicked column...
insert the rows back into the table, in the new order.
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
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));
// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
<tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
<tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
<tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>
IE11 Support (non-ES6)
If you want to support IE11, you'll need to ditch the ES6 syntax and use alternatives to Array.from and Element.closest.
i.e.
var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }
var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) {
return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}};
// do the work...
Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() {
var table = th.parentNode
while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(function(tr) { table.appendChild(tr) });
})
});
Comparer function breakdown
For the sake of brevity, I compacted the comparer() function. It's a little complex/hard to read, so here it is again exploded/formatted/commented.
// Returns a function responsible for sorting a specific column index
// (idx = columnIndex, asc = ascending order?).
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
// sort based on a numeric or localeCompare, based on type...
return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
? v1 - v2
: v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};

I wrote up some code that will sort a table by a row, assuming only one <tbody> and cells don't have a colspan.
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
}
// sortTable(tableNode, columId, false);
If you don't want to make the assumptions above, you'd need to consider how you want to behave in each circumstance. (e.g. put everything into one <tbody> or add up all the preceeding colspan values, etc.)
You could then attach this to each of your tables, e.g. assuming titles are in <thead>
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]);
}
and then invoking makeAllSortable onload.
Example fiddle of it working on a table.

Nick Grealy's accepted answer is great but acts a bit quirky if your rows are inside a <tbody> tag (the first row isn't ever sorted and after sorting rows end up outside of the tbody tag, possibly losing formatting).
This is a simple fix, however:
Just change:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
to:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
const tbody = table.querySelector('tbody');
Array.from(tbody.querySelectorAll('tr'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => tbody.appendChild(tr) );

The best way I know to sort HTML table with javascript is with the following function.
Just pass to it the id of the table you'd like to sort and the column number on the row. it assumes that the column you are sorting is numeric or has numbers in it and will do regex replace to get the number itself (great for currencies and other numbers with symbols in it).
function sortTable(table_id, sortColumn){
var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
var rowData = tableData.getElementsByTagName('tr');
for(var i = 0; i < rowData.length - 1; i++){
for(var j = 0; j < rowData.length - (i + 1); j++){
if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){
tableData.insertBefore(rowData.item(j+1),rowData.item(j));
}
}
}
}
Using example:
$(function(){
// pass the id and the <td> place you want to sort by (td counts from 0)
sortTable('table_id', 3);
});

It does WAY more than "just sorting", but dataTables.net does what you need. I use it daily and is well supported and VERY fast (does require jQuery)
http://datatables.net/
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Google Visualizations is another option, but requires a bit more setup that dataTables, but does NOT require any particular framework/library (other than google.visualizations):
http://code.google.com/apis/ajax/playground/?type=visualization#table
And there are other options to... especially if you're using one of the other JS frameworks. Dojo, Prototype, etc all have usable "table enhancement" plugins that provide at minimum table sorting functionality. Many provide more, but I'll restate...I've yet to come across one as powerful and as FAST as datatables.net.

Table Sorting with :hover arrows effect. Simply add the class .order to the <th> element of each column to be ordered
function table_sort() {
const styleSheet = document.createElement('style')
styleSheet.innerHTML = `
.order-inactive span {
visibility:hidden;
}
.order-inactive:hover span {
visibility:visible;
}
.order-active span {
visibility: visible;
}
`
document.head.appendChild(styleSheet)
document.querySelectorAll('th.order').forEach(th_elem => {
let asc = true
const span_elem = document.createElement('span')
span_elem.style = "font-size:0.8rem; margin-left:0.5rem"
span_elem.innerHTML = "▼"
th_elem.appendChild(span_elem)
th_elem.classList.add('order-inactive')
const index = Array.from(th_elem.parentNode.children).indexOf(th_elem)
th_elem.addEventListener('click', (e) => {
document.querySelectorAll('th.order').forEach(elem => {
elem.classList.remove('order-active')
elem.classList.add('order-inactive')
})
th_elem.classList.remove('order-inactive')
th_elem.classList.add('order-active')
if (!asc) {
th_elem.querySelector('span').innerHTML = '▲'
} else {
th_elem.querySelector('span').innerHTML = '▼'
}
const arr = Array.from(th_elem.closest("table").querySelectorAll('tbody tr'))
arr.sort((a, b) => {
const a_val = a.children[index].innerText
const b_val = b.children[index].innerText
return (asc) ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)
})
arr.forEach(elem => {
th_elem.closest("table").querySelector("tbody").appendChild(elem)
})
asc = !asc
})
})
}
table_sort()
<table>
<thead>
<tr>
<th class="order">Country</th>
<th class="order">Date</th>
<th class="order">Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>France</td>
<td>2001-01-01</td>
<td><i>25</i></td>
</tr>
<tr>
<td><a href=#>spain</a></td>
<td><i>2005-05-05</i></td>
<td></td>
</tr>
<tr>
<td><b>Lebanon</b></td>
<td><a href=#>2002-02-02</a></td>
<td><b>-17</b></td>
</tr>
<tr>
<td><i>Argentina</i></td>
<td>2005-04-04</td>
<td><a href=#>100</a></td>
</tr>
<tr>
<td>USA</td>
<td></td>
<td>-6</td>
</tr>
</tbody>
</table>

You could deal with a json array and the sort function. It is a pretty easy maintanable structure to manipulate (ex: sorting).
Untested, but here's the idea. That would support multiple ordering and sequential ordering if you pass in a array in which you put the columns in the order they should be ordered by.
var DATA_TABLE = {
{name: 'George', lastname: 'Blarr', age:45},
{name: 'Bob', lastname: 'Arr', age: 20}
//...
};
function sortDataTable(arrayColNames, asc) { // if not asc, desc
for (var i=0;i<arrayColNames.length;i++) {
var columnName = arrayColNames[i];
DATA_TABLE = DATA_TABLE.sort(function(a,b){
if (asc) {
return (a[columnName] > b[columnName]) ? 1 : -1;
} else {
return (a[columnName] < b[columnName]) ? 1 : -1;
}
});
}
}
function updateHTMLTable() {
// update innerHTML / textContent according to DATA_TABLE
// Note: textContent for firefox, innerHTML for others
}
Now let's imagine you need to order by lastname, then name, and finally by age.
var orderAsc = true;
sortDataTable(['lastname', 'name', 'age'], orderAsc);
It should result in something like :
{name: 'Jack', lastname: 'Ahrl', age: 20},
{name: 'Jack', lastname: 'Ahrl', age: 22},
//...

Here is a complete example using pure JavaScript. The algorithm used for sorting is basically BubbleSort. Here is a Fiddle.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function sort(ascending, columnClassName, tableId) {
var tbody = document.getElementById(tableId).getElementsByTagName(
"tbody")[0];
var rows = tbody.getElementsByTagName("tr");
var unsorted = true;
while (unsorted) {
unsorted = false
for (var r = 0; r < rows.length - 1; r++) {
var row = rows[r];
var nextRow = rows[r + 1];
var value = row.getElementsByClassName(columnClassName)[0].innerHTML;
var nextValue = nextRow.getElementsByClassName(columnClassName)[0].innerHTML;
value = value.replace(',', '.'); // in case a comma is used in float number
nextValue = nextValue.replace(',', '.');
if (!isNaN(value)) {
value = parseFloat(value);
nextValue = parseFloat(nextValue);
}
if (ascending ? value > nextValue : value < nextValue) {
tbody.insertBefore(nextRow, row);
unsorted = true;
}
}
}
};
</script>
</head>
<body>
<table id="content-table">
<thead>
<tr>
<th class="id">ID asc des
</th>
<th class="country">Country asc des
</th>
<th class="some-fact">Some fact asc
des
<th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">001</td>
<td class="country">Germany</td>
<td class="some-fact">16.405</td>
</tr>
<tr>
<td class="id">002</td>
<td class="country">France</td>
<td class="some-fact">10.625</td>
</tr>
<tr>
<td class="id">003</td>
<td class="country">UK</td>
<td class="some-fact">15.04</td>
</tr>
<tr>
<td class="id">004</td>
<td class="country">China</td>
<td class="some-fact">13.536</td>
</tr>
</tbody>
</table>
</body>
</html>
You can also check out the source from here: https://github.com/wmentzel/table-sort

Sorting table rows by cell.
1. Little simpler and has some features.
2. Distinguish 'number' and 'string' on sorting
3. Add toggle to sort by ASC, DESC
var index; // cell index
var toggleBool; // sorting asc, desc
function sorting(tbody, index){
this.index = index;
if(toggleBool){
toggleBool = false;
}else{
toggleBool = true;
}
var datas= new Array();
var tbodyLength = tbody.rows.length;
for(var i=0; i<tbodyLength; i++){
datas[i] = tbody.rows[i];
}
// sort by cell[index]
datas.sort(compareCells);
for(var i=0; i<tbody.rows.length; i++){
// rearrange table rows by sorted rows
tbody.appendChild(datas[i]);
}
}
function compareCells(a,b) {
var aVal = a.cells[index].innerText;
var bVal = b.cells[index].innerText;
aVal = aVal.replace(/\,/g, '');
bVal = bVal.replace(/\,/g, '');
if(toggleBool){
var temp = aVal;
aVal = bVal;
bVal = temp;
}
if(aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)){
return parseFloat(aVal) - parseFloat(bVal);
}
else{
if (aVal < bVal){
return -1;
}else if (aVal > bVal){
return 1;
}else{
return 0;
}
}
}
below is html sample
<table summary="Pioneer">
<thead>
<tr>
<th scope="col" onclick="sorting(tbody01, 0)">No.</th>
<th scope="col" onclick="sorting(tbody01, 1)">Name</th>
<th scope="col" onclick="sorting(tbody01, 2)">Belong</th>
<th scope="col" onclick="sorting(tbody01, 3)">Current Networth</th>
<th scope="col" onclick="sorting(tbody01, 4)">BirthDay</th>
<th scope="col" onclick="sorting(tbody01, 5)">Just Number</th>
</tr>
</thead>
<tbody id="tbody01">
<tr>
<td>1</td>
<td>Gwanshic Yi</td>
<td>Gwanshic Home</td>
<td>120000</td>
<td>1982-03-20</td>
<td>124,124,523</td>
</tr>
<tr>
<td>2</td>
<td>Steve Jobs</td>
<td>Apple</td>
<td>19000000000</td>
<td>1955-02-24</td>
<td>194,523</td>
</tr>
<tr>
<td>3</td>
<td>Bill Gates</td>
<td>MicroSoft</td>
<td>84300000000</td>
<td>1955-10-28</td>
<td>1,524,124,523</td>
</tr>
<tr>
<td>4</td>
<td>Larry Page</td>
<td>Google</td>
<td>39100000000</td>
<td>1973-03-26</td>
<td>11,124,523</td>
</tr>
</tbody>
</table>

In case your table does not have ths but only tds (with headers included) you can try the following which is based on Nick Grealy's answer above:
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
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));
// do the work...
document.querySelectorAll('tr:first-child td').forEach(td => td.addEventListener('click', (() => {
const table = td.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(td.parentNode.children).indexOf(td), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
font-family: 'Roboto', sans-serif;
text-transform:capitalize;
overflow:hidden;
margin: 0 auto;
text-align:left;
}
table {
color:#666;
font-size:12px;
background:#124;
border:#ccc 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border-collapse: collapse;
width: 100%;
}
table td {
padding:10px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
width: 6.9in;
}
table tbody tr:first-child td
{
background: #124!important;
color:#fff;
}
table tbody tr th
{
padding:10px;
border-left: 1px solid #e0e0e0;
background: #124!important;
color:#fff;
}
<table>
<tr><td>Country</td><td>Date</td><td>Size</td></tr>
<tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
<tr><td>spain</td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td><b>-17</b></td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>

Another approach to sort HTML table. (based on W3.JS HTML Sort)
var collection = [{
"Country": "France",
"Date": "2001-01-01",
"Size": "25",
}, {
"Country": "spain",
"Date": "2005-05-05",
"Size": "",
}, {
"Country": "Lebanon",
"Date": "2002-02-02",
"Size": "-17",
}, {
"Country": "Argentina",
"Date": "2005-04-04",
"Size": "100",
}, {
"Country": "USA",
"Date": "",
"Size": "-6",
}]
for (var j = 0; j < 3; j++) {
$("#myTable th:eq(" + j + ")").addClass("control-label clickable");
$("#myTable th:eq(" + j + ")").attr('onClick', "w3.sortHTML('#myTable', '.item', 'td:nth-child(" + (j + 1) + ")')");
}
$tbody = $("#myTable").append('<tbody></tbody>');
for (var i = 0; i < collection.length; i++) {
$tbody = $tbody.append('<tr class="item"><td>' + collection[i]["Country"] + '</td><td>' + collection[i]["Date"] + '</td><td>' + collection[i]["Size"] + '</td></tr>');
}
.control-label:after {
content: "*";
color: red;
}
.clickable {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>
<table id="myTable" class="w3-table-all">
<thead>
<tr>
<th>Country</th>
<th>Date</th>
<th>Size</th>
</tr>
</thead>
</table>

Another compact but readable solution:
It just requires adding the class .order to the <th> element of each column to be ordered
document.querySelectorAll('th.order').forEach(th_elem => {
let asc=true
const index = Array.from(th_elem.parentNode.children).indexOf(th_elem)
th_elem.addEventListener('click', (e) => {
const arr = [... th_elem.closest("table").querySelectorAll('tbody tr')]
arr.sort( (a, b) => {
const a_val = a.children[index].innerText
const b_val = b.children[index].innerText
return (asc) ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)
})
arr.forEach(elem => {
th_elem.closest("table").querySelector("tbody").appendChild(elem)
})
asc = !asc
})
})

Sorting html table column on page load
var table = $('table#all_items_table');
var rows = table.find('tr:gt(0)').toArray().sort(comparer(3));
for (var i = 0; i < rows.length; i++) {
table.append(rows[i])
}
function comparer(index) {
return function (a, b) {
var v1= getCellValue(a, index),
v2= getCellValue(b, index);
return $.isNumeric(v2) && $.isNumeric(v1) ? v2 - v1: v2.localeCompare(v1)
}
}
function getCellValue(row, index) {
return parseFloat($(row).children('td').eq(index).html().replace(/,/g,'')); //1234234.45645->1234234
}

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid;
border-collapse: collapse;
}
td , th {
padding: 5px;
width: 100px;
}
th {
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on age.</p>
<p id="demo"></p>
<script>
var nameArrow = "", yearArrow = "";
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
yearACS = true;
function sortYear() {
if (yearACS) {
nameArrow = "";
yearArrow = "🔽";
cars.sort(function(a,b) {
return a.year - b.year;
});
yearACS = false;
}else {
nameArrow = "";
yearArrow = "🔼";
cars.sort(function(a,b) {
return b.year - a.year;
});
yearACS = true;
}
displayCars();
}
nameACS = true;
function sortName() {
if (nameACS) {
nameArrow = "🔽";
yearArrow = "";
cars.sort(function(a,b) {
x = a.type.toLowerCase();
y = b.type.toLowerCase();
if (x > y) {return 1;}
if (x < y) {return -1};
return 0;
});
nameACS = false;
} else {
nameArrow = "🔼";
yearArrow = "";
cars.sort(function(a,b) {
x = a.type.toUpperCase();
y = b.type.toUpperCase();
if (x > y) { return -1};
if (x <y) { return 1 };
return 0;
});
nameACS = true;
}
displayCars();
}
displayCars();
function displayCars() {
var txt = "<table><tr><th onclick='sortName()'>name " + nameArrow + "</th><th onclick='sortYear()'>year " + yearArrow + "</th><tr>";
for (let i = 0; i < cars.length; i++) {
txt += "<tr><td>"+ cars[i].type + "</td><td>" + cars[i].year + "</td></tr>";
}
txt += "</table>";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

I have edited the code from one of the example here to use jquery.
It's still not 100% jquery though. Any thoughts on the two different versions, like what are the pros and cons of each?
function column_sort() {
getCellValue = (tr, idx) => $(tr).find('td').eq( idx ).text();
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));
table = $(this).closest('table')[0];
tbody = $(table).find('tbody')[0];
elm = $(this)[0];
children = elm.parentNode.children;
Array.from(tbody.querySelectorAll('tr')).sort( comparer(
Array.from(children).indexOf(elm), table.asc = !table.asc))
.forEach(tr => tbody.appendChild(tr) );
}
table.find('thead th').on('click', column_sort);

I'm very grateful for the accepted answer and jedwards' fix, but I also find them poorly readable. So here's my refactored and verbose version:
// Remember that strings are false positives for isNaN
const isEmptyOrNaN = (obj) => obj === "" || isNaN(obj);
const getCellValueInColumn = (tr, columnIdx) =>
tr.children[columnIdx].innerText || tr.children[columnIdx].textContent;
const compareCellValues = (cellValue1, cellValue2) => {
return isEmptyOrNaN(cellValue1) || isEmptyOrNaN(cellValue2)
? cellValue1.toString().localeCompare(cellValue2)
: cellValue1 - cellValue2;
};
const compareFnFactory = (columnIdx, ascending) => (firstEl, secondEl) => {
const cellValue1 = getCellValueInColumn(firstEl, columnIdx);
const cellValue2 = getCellValueInColumn(secondEl, columnIdx);
return ascending
? compareCellValues(cellValue1, cellValue2)
: compareCellValues(cellValue2, cellValue1);
};
document.querySelectorAll("th").forEach((th) =>
th.addEventListener("click", () => {
const table = th.closest("table");
const tbody = table.querySelector("tbody");
const columnIdx = Array.from(th.parentNode.children).indexOf(th);
const compareFn = compareFnFactory(columnIdx, (this.ascending = !this.ascending));
Array.from(tbody.querySelectorAll("tr"))
.sort(compareFn)
.forEach((tr) => tbody.appendChild(tr));
})
);
If you find any extra spaces or parenthesis, unnecessary indents, etc., it's because I've formatted the code with prettier.
I've wrapped this code inside a:
javascript: (function () {
// Code here
})();
and put it into a bookmarklet, so now I can sort columns inside Keycloak Admin Console.

I've found myself using #NickGrealy method to sort items and it works great!
(https://stackoverflow.com/a/49041392/18045902)
Issue I had is that i'm using a different format for date: dd-mm-YY instead of the ISO one.
As I'm passing data from a .php file as a string I had to convert the string in a date then compare with ><==
Substitute the compare function
// Returns a function responsible for sorting a specific column index
// (idx = columnIndex, asc = ascending order?).
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
// sort based on a numeric or localeCompare, based on type...
return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
? v1 - v2
: v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};
with this:
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
if(v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)){
x = v1 - v2;
console.log(v1);
} else if(v1.includes("-")) {
var partsArray1 = v1.split('-');
var partsArray2 = v2.split('-');
var data1 = new Date(partsArray1[2],partsArray1[1],partsArray1[0]);
var data2 = new Date(partsArray2[2],partsArray2[1],partsArray2[0]);
if(data1>data2){
x=1;
} else if (data1<data2) {
x=-1;
} else if (data1==data2) {
x=0;
}
} else {
x = v1.toString().localeCompare(v2);
}
// sort based on a numeric or localeCompare, based on type...
//return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
// ? v1 - v2
// : v1.toString().localeCompare(v2);
return x;
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};
NOTE: this will only work if the date you are trying to parse is a string in the dd-mm-YY format.
If you need a different format change the includes() and the split() character (in my case is "-") and the order of the date you are creating with Date().
If there's something wrong with this method please comment.

Reordering elements on an HTML form using Vanila JS: what's the best practice in terms of performance? [duplicate]

I'm after a table sorting solution (in JavaScript) but I can't seem to find a suitable one yet. I just need it to sort each column alphabetically. It doesn't need to ignore any code or any numbers or to work with currency. Just a click on the column header switches it from sorted a-z/z-a.
Does anyone know of a really simple solution like this?

Just revisiting an old solution, I thought I'd give it a facelift for it's ~5 year anniversary!
Plain Javascript (ES6)
Does alpha and numeric sorting - ascending and descending
Works in Chrome, Firefox, Safari (and IE11, see below)
Quick explanation
add a click event to all header (th) cells...
for the current table, find all rows (except the first)...
sort the rows, based on the value of the clicked column...
insert the rows back into the table, in the new order.
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
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));
// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
<tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
<tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
<tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>
IE11 Support (non-ES6)
If you want to support IE11, you'll need to ditch the ES6 syntax and use alternatives to Array.from and Element.closest.
i.e.
var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }
var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) {
return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}};
// do the work...
Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() {
var table = th.parentNode
while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(function(tr) { table.appendChild(tr) });
})
});
Comparer function breakdown
For the sake of brevity, I compacted the comparer() function. It's a little complex/hard to read, so here it is again exploded/formatted/commented.
// Returns a function responsible for sorting a specific column index
// (idx = columnIndex, asc = ascending order?).
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
// sort based on a numeric or localeCompare, based on type...
return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
? v1 - v2
: v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};

I wrote up some code that will sort a table by a row, assuming only one <tbody> and cells don't have a colspan.
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
}
// sortTable(tableNode, columId, false);
If you don't want to make the assumptions above, you'd need to consider how you want to behave in each circumstance. (e.g. put everything into one <tbody> or add up all the preceeding colspan values, etc.)
You could then attach this to each of your tables, e.g. assuming titles are in <thead>
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]);
}
and then invoking makeAllSortable onload.
Example fiddle of it working on a table.

Nick Grealy's accepted answer is great but acts a bit quirky if your rows are inside a <tbody> tag (the first row isn't ever sorted and after sorting rows end up outside of the tbody tag, possibly losing formatting).
This is a simple fix, however:
Just change:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
to:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
const tbody = table.querySelector('tbody');
Array.from(tbody.querySelectorAll('tr'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => tbody.appendChild(tr) );

The best way I know to sort HTML table with javascript is with the following function.
Just pass to it the id of the table you'd like to sort and the column number on the row. it assumes that the column you are sorting is numeric or has numbers in it and will do regex replace to get the number itself (great for currencies and other numbers with symbols in it).
function sortTable(table_id, sortColumn){
var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
var rowData = tableData.getElementsByTagName('tr');
for(var i = 0; i < rowData.length - 1; i++){
for(var j = 0; j < rowData.length - (i + 1); j++){
if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){
tableData.insertBefore(rowData.item(j+1),rowData.item(j));
}
}
}
}
Using example:
$(function(){
// pass the id and the <td> place you want to sort by (td counts from 0)
sortTable('table_id', 3);
});

It does WAY more than "just sorting", but dataTables.net does what you need. I use it daily and is well supported and VERY fast (does require jQuery)
http://datatables.net/
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Google Visualizations is another option, but requires a bit more setup that dataTables, but does NOT require any particular framework/library (other than google.visualizations):
http://code.google.com/apis/ajax/playground/?type=visualization#table
And there are other options to... especially if you're using one of the other JS frameworks. Dojo, Prototype, etc all have usable "table enhancement" plugins that provide at minimum table sorting functionality. Many provide more, but I'll restate...I've yet to come across one as powerful and as FAST as datatables.net.

Table Sorting with :hover arrows effect. Simply add the class .order to the <th> element of each column to be ordered
function table_sort() {
const styleSheet = document.createElement('style')
styleSheet.innerHTML = `
.order-inactive span {
visibility:hidden;
}
.order-inactive:hover span {
visibility:visible;
}
.order-active span {
visibility: visible;
}
`
document.head.appendChild(styleSheet)
document.querySelectorAll('th.order').forEach(th_elem => {
let asc = true
const span_elem = document.createElement('span')
span_elem.style = "font-size:0.8rem; margin-left:0.5rem"
span_elem.innerHTML = "▼"
th_elem.appendChild(span_elem)
th_elem.classList.add('order-inactive')
const index = Array.from(th_elem.parentNode.children).indexOf(th_elem)
th_elem.addEventListener('click', (e) => {
document.querySelectorAll('th.order').forEach(elem => {
elem.classList.remove('order-active')
elem.classList.add('order-inactive')
})
th_elem.classList.remove('order-inactive')
th_elem.classList.add('order-active')
if (!asc) {
th_elem.querySelector('span').innerHTML = '▲'
} else {
th_elem.querySelector('span').innerHTML = '▼'
}
const arr = Array.from(th_elem.closest("table").querySelectorAll('tbody tr'))
arr.sort((a, b) => {
const a_val = a.children[index].innerText
const b_val = b.children[index].innerText
return (asc) ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)
})
arr.forEach(elem => {
th_elem.closest("table").querySelector("tbody").appendChild(elem)
})
asc = !asc
})
})
}
table_sort()
<table>
<thead>
<tr>
<th class="order">Country</th>
<th class="order">Date</th>
<th class="order">Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>France</td>
<td>2001-01-01</td>
<td><i>25</i></td>
</tr>
<tr>
<td><a href=#>spain</a></td>
<td><i>2005-05-05</i></td>
<td></td>
</tr>
<tr>
<td><b>Lebanon</b></td>
<td><a href=#>2002-02-02</a></td>
<td><b>-17</b></td>
</tr>
<tr>
<td><i>Argentina</i></td>
<td>2005-04-04</td>
<td><a href=#>100</a></td>
</tr>
<tr>
<td>USA</td>
<td></td>
<td>-6</td>
</tr>
</tbody>
</table>

You could deal with a json array and the sort function. It is a pretty easy maintanable structure to manipulate (ex: sorting).
Untested, but here's the idea. That would support multiple ordering and sequential ordering if you pass in a array in which you put the columns in the order they should be ordered by.
var DATA_TABLE = {
{name: 'George', lastname: 'Blarr', age:45},
{name: 'Bob', lastname: 'Arr', age: 20}
//...
};
function sortDataTable(arrayColNames, asc) { // if not asc, desc
for (var i=0;i<arrayColNames.length;i++) {
var columnName = arrayColNames[i];
DATA_TABLE = DATA_TABLE.sort(function(a,b){
if (asc) {
return (a[columnName] > b[columnName]) ? 1 : -1;
} else {
return (a[columnName] < b[columnName]) ? 1 : -1;
}
});
}
}
function updateHTMLTable() {
// update innerHTML / textContent according to DATA_TABLE
// Note: textContent for firefox, innerHTML for others
}
Now let's imagine you need to order by lastname, then name, and finally by age.
var orderAsc = true;
sortDataTable(['lastname', 'name', 'age'], orderAsc);
It should result in something like :
{name: 'Jack', lastname: 'Ahrl', age: 20},
{name: 'Jack', lastname: 'Ahrl', age: 22},
//...

Here is a complete example using pure JavaScript. The algorithm used for sorting is basically BubbleSort. Here is a Fiddle.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function sort(ascending, columnClassName, tableId) {
var tbody = document.getElementById(tableId).getElementsByTagName(
"tbody")[0];
var rows = tbody.getElementsByTagName("tr");
var unsorted = true;
while (unsorted) {
unsorted = false
for (var r = 0; r < rows.length - 1; r++) {
var row = rows[r];
var nextRow = rows[r + 1];
var value = row.getElementsByClassName(columnClassName)[0].innerHTML;
var nextValue = nextRow.getElementsByClassName(columnClassName)[0].innerHTML;
value = value.replace(',', '.'); // in case a comma is used in float number
nextValue = nextValue.replace(',', '.');
if (!isNaN(value)) {
value = parseFloat(value);
nextValue = parseFloat(nextValue);
}
if (ascending ? value > nextValue : value < nextValue) {
tbody.insertBefore(nextRow, row);
unsorted = true;
}
}
}
};
</script>
</head>
<body>
<table id="content-table">
<thead>
<tr>
<th class="id">ID asc des
</th>
<th class="country">Country asc des
</th>
<th class="some-fact">Some fact asc
des
<th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">001</td>
<td class="country">Germany</td>
<td class="some-fact">16.405</td>
</tr>
<tr>
<td class="id">002</td>
<td class="country">France</td>
<td class="some-fact">10.625</td>
</tr>
<tr>
<td class="id">003</td>
<td class="country">UK</td>
<td class="some-fact">15.04</td>
</tr>
<tr>
<td class="id">004</td>
<td class="country">China</td>
<td class="some-fact">13.536</td>
</tr>
</tbody>
</table>
</body>
</html>
You can also check out the source from here: https://github.com/wmentzel/table-sort

Sorting table rows by cell.
1. Little simpler and has some features.
2. Distinguish 'number' and 'string' on sorting
3. Add toggle to sort by ASC, DESC
var index; // cell index
var toggleBool; // sorting asc, desc
function sorting(tbody, index){
this.index = index;
if(toggleBool){
toggleBool = false;
}else{
toggleBool = true;
}
var datas= new Array();
var tbodyLength = tbody.rows.length;
for(var i=0; i<tbodyLength; i++){
datas[i] = tbody.rows[i];
}
// sort by cell[index]
datas.sort(compareCells);
for(var i=0; i<tbody.rows.length; i++){
// rearrange table rows by sorted rows
tbody.appendChild(datas[i]);
}
}
function compareCells(a,b) {
var aVal = a.cells[index].innerText;
var bVal = b.cells[index].innerText;
aVal = aVal.replace(/\,/g, '');
bVal = bVal.replace(/\,/g, '');
if(toggleBool){
var temp = aVal;
aVal = bVal;
bVal = temp;
}
if(aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)){
return parseFloat(aVal) - parseFloat(bVal);
}
else{
if (aVal < bVal){
return -1;
}else if (aVal > bVal){
return 1;
}else{
return 0;
}
}
}
below is html sample
<table summary="Pioneer">
<thead>
<tr>
<th scope="col" onclick="sorting(tbody01, 0)">No.</th>
<th scope="col" onclick="sorting(tbody01, 1)">Name</th>
<th scope="col" onclick="sorting(tbody01, 2)">Belong</th>
<th scope="col" onclick="sorting(tbody01, 3)">Current Networth</th>
<th scope="col" onclick="sorting(tbody01, 4)">BirthDay</th>
<th scope="col" onclick="sorting(tbody01, 5)">Just Number</th>
</tr>
</thead>
<tbody id="tbody01">
<tr>
<td>1</td>
<td>Gwanshic Yi</td>
<td>Gwanshic Home</td>
<td>120000</td>
<td>1982-03-20</td>
<td>124,124,523</td>
</tr>
<tr>
<td>2</td>
<td>Steve Jobs</td>
<td>Apple</td>
<td>19000000000</td>
<td>1955-02-24</td>
<td>194,523</td>
</tr>
<tr>
<td>3</td>
<td>Bill Gates</td>
<td>MicroSoft</td>
<td>84300000000</td>
<td>1955-10-28</td>
<td>1,524,124,523</td>
</tr>
<tr>
<td>4</td>
<td>Larry Page</td>
<td>Google</td>
<td>39100000000</td>
<td>1973-03-26</td>
<td>11,124,523</td>
</tr>
</tbody>
</table>

In case your table does not have ths but only tds (with headers included) you can try the following which is based on Nick Grealy's answer above:
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
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));
// do the work...
document.querySelectorAll('tr:first-child td').forEach(td => td.addEventListener('click', (() => {
const table = td.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(td.parentNode.children).indexOf(td), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
font-family: 'Roboto', sans-serif;
text-transform:capitalize;
overflow:hidden;
margin: 0 auto;
text-align:left;
}
table {
color:#666;
font-size:12px;
background:#124;
border:#ccc 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border-collapse: collapse;
width: 100%;
}
table td {
padding:10px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
width: 6.9in;
}
table tbody tr:first-child td
{
background: #124!important;
color:#fff;
}
table tbody tr th
{
padding:10px;
border-left: 1px solid #e0e0e0;
background: #124!important;
color:#fff;
}
<table>
<tr><td>Country</td><td>Date</td><td>Size</td></tr>
<tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
<tr><td>spain</td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td><b>-17</b></td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>

Another approach to sort HTML table. (based on W3.JS HTML Sort)
var collection = [{
"Country": "France",
"Date": "2001-01-01",
"Size": "25",
}, {
"Country": "spain",
"Date": "2005-05-05",
"Size": "",
}, {
"Country": "Lebanon",
"Date": "2002-02-02",
"Size": "-17",
}, {
"Country": "Argentina",
"Date": "2005-04-04",
"Size": "100",
}, {
"Country": "USA",
"Date": "",
"Size": "-6",
}]
for (var j = 0; j < 3; j++) {
$("#myTable th:eq(" + j + ")").addClass("control-label clickable");
$("#myTable th:eq(" + j + ")").attr('onClick', "w3.sortHTML('#myTable', '.item', 'td:nth-child(" + (j + 1) + ")')");
}
$tbody = $("#myTable").append('<tbody></tbody>');
for (var i = 0; i < collection.length; i++) {
$tbody = $tbody.append('<tr class="item"><td>' + collection[i]["Country"] + '</td><td>' + collection[i]["Date"] + '</td><td>' + collection[i]["Size"] + '</td></tr>');
}
.control-label:after {
content: "*";
color: red;
}
.clickable {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>
<table id="myTable" class="w3-table-all">
<thead>
<tr>
<th>Country</th>
<th>Date</th>
<th>Size</th>
</tr>
</thead>
</table>

Another compact but readable solution:
It just requires adding the class .order to the <th> element of each column to be ordered
document.querySelectorAll('th.order').forEach(th_elem => {
let asc=true
const index = Array.from(th_elem.parentNode.children).indexOf(th_elem)
th_elem.addEventListener('click', (e) => {
const arr = [... th_elem.closest("table").querySelectorAll('tbody tr')]
arr.sort( (a, b) => {
const a_val = a.children[index].innerText
const b_val = b.children[index].innerText
return (asc) ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)
})
arr.forEach(elem => {
th_elem.closest("table").querySelector("tbody").appendChild(elem)
})
asc = !asc
})
})

Sorting html table column on page load
var table = $('table#all_items_table');
var rows = table.find('tr:gt(0)').toArray().sort(comparer(3));
for (var i = 0; i < rows.length; i++) {
table.append(rows[i])
}
function comparer(index) {
return function (a, b) {
var v1= getCellValue(a, index),
v2= getCellValue(b, index);
return $.isNumeric(v2) && $.isNumeric(v1) ? v2 - v1: v2.localeCompare(v1)
}
}
function getCellValue(row, index) {
return parseFloat($(row).children('td').eq(index).html().replace(/,/g,'')); //1234234.45645->1234234
}

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid;
border-collapse: collapse;
}
td , th {
padding: 5px;
width: 100px;
}
th {
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on age.</p>
<p id="demo"></p>
<script>
var nameArrow = "", yearArrow = "";
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
yearACS = true;
function sortYear() {
if (yearACS) {
nameArrow = "";
yearArrow = "🔽";
cars.sort(function(a,b) {
return a.year - b.year;
});
yearACS = false;
}else {
nameArrow = "";
yearArrow = "🔼";
cars.sort(function(a,b) {
return b.year - a.year;
});
yearACS = true;
}
displayCars();
}
nameACS = true;
function sortName() {
if (nameACS) {
nameArrow = "🔽";
yearArrow = "";
cars.sort(function(a,b) {
x = a.type.toLowerCase();
y = b.type.toLowerCase();
if (x > y) {return 1;}
if (x < y) {return -1};
return 0;
});
nameACS = false;
} else {
nameArrow = "🔼";
yearArrow = "";
cars.sort(function(a,b) {
x = a.type.toUpperCase();
y = b.type.toUpperCase();
if (x > y) { return -1};
if (x <y) { return 1 };
return 0;
});
nameACS = true;
}
displayCars();
}
displayCars();
function displayCars() {
var txt = "<table><tr><th onclick='sortName()'>name " + nameArrow + "</th><th onclick='sortYear()'>year " + yearArrow + "</th><tr>";
for (let i = 0; i < cars.length; i++) {
txt += "<tr><td>"+ cars[i].type + "</td><td>" + cars[i].year + "</td></tr>";
}
txt += "</table>";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

I have edited the code from one of the example here to use jquery.
It's still not 100% jquery though. Any thoughts on the two different versions, like what are the pros and cons of each?
function column_sort() {
getCellValue = (tr, idx) => $(tr).find('td').eq( idx ).text();
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));
table = $(this).closest('table')[0];
tbody = $(table).find('tbody')[0];
elm = $(this)[0];
children = elm.parentNode.children;
Array.from(tbody.querySelectorAll('tr')).sort( comparer(
Array.from(children).indexOf(elm), table.asc = !table.asc))
.forEach(tr => tbody.appendChild(tr) );
}
table.find('thead th').on('click', column_sort);

I'm very grateful for the accepted answer and jedwards' fix, but I also find them poorly readable. So here's my refactored and verbose version:
// Remember that strings are false positives for isNaN
const isEmptyOrNaN = (obj) => obj === "" || isNaN(obj);
const getCellValueInColumn = (tr, columnIdx) =>
tr.children[columnIdx].innerText || tr.children[columnIdx].textContent;
const compareCellValues = (cellValue1, cellValue2) => {
return isEmptyOrNaN(cellValue1) || isEmptyOrNaN(cellValue2)
? cellValue1.toString().localeCompare(cellValue2)
: cellValue1 - cellValue2;
};
const compareFnFactory = (columnIdx, ascending) => (firstEl, secondEl) => {
const cellValue1 = getCellValueInColumn(firstEl, columnIdx);
const cellValue2 = getCellValueInColumn(secondEl, columnIdx);
return ascending
? compareCellValues(cellValue1, cellValue2)
: compareCellValues(cellValue2, cellValue1);
};
document.querySelectorAll("th").forEach((th) =>
th.addEventListener("click", () => {
const table = th.closest("table");
const tbody = table.querySelector("tbody");
const columnIdx = Array.from(th.parentNode.children).indexOf(th);
const compareFn = compareFnFactory(columnIdx, (this.ascending = !this.ascending));
Array.from(tbody.querySelectorAll("tr"))
.sort(compareFn)
.forEach((tr) => tbody.appendChild(tr));
})
);
If you find any extra spaces or parenthesis, unnecessary indents, etc., it's because I've formatted the code with prettier.
I've wrapped this code inside a:
javascript: (function () {
// Code here
})();
and put it into a bookmarklet, so now I can sort columns inside Keycloak Admin Console.

I've found myself using #NickGrealy method to sort items and it works great!
(https://stackoverflow.com/a/49041392/18045902)
Issue I had is that i'm using a different format for date: dd-mm-YY instead of the ISO one.
As I'm passing data from a .php file as a string I had to convert the string in a date then compare with ><==
Substitute the compare function
// Returns a function responsible for sorting a specific column index
// (idx = columnIndex, asc = ascending order?).
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
// sort based on a numeric or localeCompare, based on type...
return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
? v1 - v2
: v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};
with this:
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
if(v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)){
x = v1 - v2;
console.log(v1);
} else if(v1.includes("-")) {
var partsArray1 = v1.split('-');
var partsArray2 = v2.split('-');
var data1 = new Date(partsArray1[2],partsArray1[1],partsArray1[0]);
var data2 = new Date(partsArray2[2],partsArray2[1],partsArray2[0]);
if(data1>data2){
x=1;
} else if (data1<data2) {
x=-1;
} else if (data1==data2) {
x=0;
}
} else {
x = v1.toString().localeCompare(v2);
}
// sort based on a numeric or localeCompare, based on type...
//return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
// ? v1 - v2
// : v1.toString().localeCompare(v2);
return x;
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};
NOTE: this will only work if the date you are trying to parse is a string in the dd-mm-YY format.
If you need a different format change the includes() and the split() character (in my case is "-") and the order of the date you are creating with Date().
If there's something wrong with this method please comment.

Visible bind not updating after Observable change with Knockout

I´m creating a sortable table using Knockout. The table binding, the sorting functionality and Filtering is Working fine. However, I´d like to show a sorting icon when a specific column is active.
Since the span has bind to visible property in the header array, and this property is observable, when this value changes (in the sort function), the UI should update, but is not. What could be causing this?
Here is the JSFiddle: http://jsfiddle.net/ud3o79ag/1/
HTML:
<form action="#">
<input class="form-control" placeholder="Buscar…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</form>
<table class="table table-bordered table-striped">
<thead>
<tr data-bind="foreach: headers">
<th data-bind="click: $parent.sort">
<span data-bind="text: title"></span>
<span class="glyphicon glyphicon-sort-by-alphabet" data-bind="visible:active"></span>
</th>
</tr>
</thead>
<tbody data-bind="name:author, foreach:authors">
<tr>
<td data-bind="text:FirstName"></td>
<td data-bind="text:LastName"></td>
<td data-bind="text:Biography"></td>
<td></td>
</tr>
</tbody>
</table>
JS/Knockout:
var viewModel = function()
{
var self = this;
self.query = ko.observable('');
self.headers = [
{title:'First Name',sortPropertyName:'FirstName', asc: true, active: ko.observable(false)},
{title:'Last Name',sortPropertyName:'LastName', asc: true, active: ko.observable(false)},
{title:'Biography',sortPropertyName:'Biography', asc: true, active: ko.observable(false)},
{title:'Actions',sortPropertyName:'', asc: true, active: ko.observable(false)}
];
self.activeSort = ko.observable(function(){return 0;});
self.sort = function(header,event)
{
//if this header was just clicked a second time
if(header.active) {
header.asc = !header.asc; //toggle the direction of the sort
}
//make sure all other headers are set to inactive
ko.utils.arrayForEach(self.headers, function(item){ item.active = false; } );
//the header that was just clicked is now active
header.active = true;//our now-active header
var prop = header.sortPropertyName;
var ascSort = function(a,b){ return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0;};
var descSort = function(a,b){ return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0;};
var sortFunc = header.asc ? ascSort : descSort;
//store the new active sort function
self.activeSort(sortFunc);
};
self.authors = ko.computed(function() {
var search = self.query().toLowerCase();
var result;
var arrayresult;
if (!search)
{
result = authors;
}
else
{
result = ko.utils.arrayFilter(authors, function(item) {
if (item['FirstName'].toLowerCase().indexOf(search) >= 0 || item.LastName.toLowerCase().indexOf(search) >= 0)
{
return true;
}
else
{
return false;
}
});
}
arrayresult = [].slice.call(result).sort(self.activeSort());
return arrayresult;
});
};
ko.applyBindings(new viewModel);

Look here: http://jsfiddle.net/ud3o79ag/6/
You must set an observable using a function, so use this:
header.active(true);
instead of this:
header.active = true;
Btw I have added an "X" to your indicator, so you can actually see it.

AngularJS sum of rows ng-repeat

I add dynamically rows in my table with ng-repeat, coming from an array.
Now I want to get the sum of all sums per row (group.sum * group.perc / 100.0). I need it in a variable because I need this value for further calculations. Thank you
HTML
<tr ng-repeat="group in groupsArr">
<td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}}</td>
</tr>
SCRIPT
var taxTotals = 0;
var taxTotals =
for (i=0; i<group.length; i++) {
taxTotal = taxTotal + group[i].taxes;
};
console.log(taxTotals);
};

Create a Filter:
app.filter('sumFilter', function() {
return function(groups) {
var taxTotals = 0;
for (i=0; i<groups.length; i++) {
taxTotal = taxTotal + groups[i].taxes;
};
return taxTotals;
};
});
Use the $filter service:
app.controller('myController', function($scope, $filter) {
$scope.groups = [...];
var taxTotals = $filter('sumFilter')($scope.groups);
console.log(taxTotals);
});
Use it in your HTML:
<tr ng-repeat="group in groupsArr">
<td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}} </td>
</tr>
<tr>
<b> Tax Totals: </b> {{ groupsArr | sumFilter | currency }}
</tr>

An addition for best answer... I am using filter in my very huge table, so it is how to implement with dynamic filters.
THE FILTER
app.filter('sumStatusFilter', function(){
return function (items, filtersStatus, filterLocations){
var filtered = [];
var filtered1 = [];
var total = 0;
if (typeof filtersStatus != 'undefined') {
angular.forEach(items, function(item) {
for(i = 0; i < filtersStatus.length; i ++){
if(filtersStatus[i] == item.status_message)
filtered.push(item);
}
});
}
if (typeof filterLocations != 'undefined') {
angular.forEach(filtered, function(item) {
for(i = 0; i < filterLocations.length; i ++){
if(filterLocations[i] == item.office_location)
filtered1.push(item);
}
});
filtered = [];
filtered = filtered1;
}
if (filtered.length == 0) {
filtered = this.jobs
}
angular.forEach(filtered, function(value, key){
total += value.restoration_reserve
});
return total;
}
});
in HTML
<tr><td>Total: {{ report_controller.items | sumStatusFilter:report_controller.status_message_selections:report_controller.office_selections | currency }}</td></tr>

UPDATE AFTER ANSWER coming from pixelbits
Thanks to pixelbits. Here is my filter, which works perfect within the view.
HTML
<tr ng-repeat="group in groupsArr">
<td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}} </td>
</tr>
<tr>
<b> Tax Totals: </b> {{ groupsArr | sumFilter | currency }}
</tr>
Filter
angular.module('App.filters', []).filter('sumFilter', [function () {
// filter for tax sum
return function(groups, lenght) {
var taxTotal = 0;
for (i=0; i < groups.length; i++) {
taxTotal = taxTotal + ((groups[i].perc * groups[i].sum) / 100);
};
return taxTotal;
};
}]);
If I want to access from my controller, it doesn´t work: I cannot get the variable taxTotals *Cannot read property 'length' of undefined
As mentioned, in the view it works.
Filter Service
var taxTotal = $filter('sumFilter')($scope.groups);
console.log(taxTotal);

Or use Map Reduce!
Controller
$scope.mappers = {
tax: function(m){
return group.sum * group.perc / 100.0;
}
}
$scope.sum = function(m){
if($scope.groupsArr.length == 0) return;
return $scope.groupsArr.map(m).reduce(function(p, c){
return p + c;
}) || 0;
};
HTML
<tr ng-repeat="group in groupsArr">
<td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}} </td>
</tr>
<tr>
<b> Tax Totals: </b> {{ sum(mappers.tax) }}
</tr>

Sorting HTML table with JavaScript

I'm after a table sorting solution (in JavaScript) but I can't seem to find a suitable one yet. I just need it to sort each column alphabetically. It doesn't need to ignore any code or any numbers or to work with currency. Just a click on the column header switches it from sorted a-z/z-a.
Does anyone know of a really simple solution like this?

Just revisiting an old solution, I thought I'd give it a facelift for it's ~5 year anniversary!
Plain Javascript (ES6)
Does alpha and numeric sorting - ascending and descending
Works in Chrome, Firefox, Safari (and IE11, see below)
Quick explanation
add a click event to all header (th) cells...
for the current table, find all rows (except the first)...
sort the rows, based on the value of the clicked column...
insert the rows back into the table, in the new order.
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
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));
// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
<tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
<tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
<tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>
IE11 Support (non-ES6)
If you want to support IE11, you'll need to ditch the ES6 syntax and use alternatives to Array.from and Element.closest.
i.e.
var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }
var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) {
return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}};
// do the work...
Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() {
var table = th.parentNode
while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(function(tr) { table.appendChild(tr) });
})
});
Comparer function breakdown
For the sake of brevity, I compacted the comparer() function. It's a little complex/hard to read, so here it is again exploded/formatted/commented.
// Returns a function responsible for sorting a specific column index
// (idx = columnIndex, asc = ascending order?).
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
// sort based on a numeric or localeCompare, based on type...
return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
? v1 - v2
: v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};

I wrote up some code that will sort a table by a row, assuming only one <tbody> and cells don't have a colspan.
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
}
// sortTable(tableNode, columId, false);
If you don't want to make the assumptions above, you'd need to consider how you want to behave in each circumstance. (e.g. put everything into one <tbody> or add up all the preceeding colspan values, etc.)
You could then attach this to each of your tables, e.g. assuming titles are in <thead>
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]);
}
and then invoking makeAllSortable onload.
Example fiddle of it working on a table.

Nick Grealy's accepted answer is great but acts a bit quirky if your rows are inside a <tbody> tag (the first row isn't ever sorted and after sorting rows end up outside of the tbody tag, possibly losing formatting).
This is a simple fix, however:
Just change:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
to:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
const tbody = table.querySelector('tbody');
Array.from(tbody.querySelectorAll('tr'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => tbody.appendChild(tr) );

The best way I know to sort HTML table with javascript is with the following function.
Just pass to it the id of the table you'd like to sort and the column number on the row. it assumes that the column you are sorting is numeric or has numbers in it and will do regex replace to get the number itself (great for currencies and other numbers with symbols in it).
function sortTable(table_id, sortColumn){
var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
var rowData = tableData.getElementsByTagName('tr');
for(var i = 0; i < rowData.length - 1; i++){
for(var j = 0; j < rowData.length - (i + 1); j++){
if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){
tableData.insertBefore(rowData.item(j+1),rowData.item(j));
}
}
}
}
Using example:
$(function(){
// pass the id and the <td> place you want to sort by (td counts from 0)
sortTable('table_id', 3);
});

It does WAY more than "just sorting", but dataTables.net does what you need. I use it daily and is well supported and VERY fast (does require jQuery)
http://datatables.net/
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Google Visualizations is another option, but requires a bit more setup that dataTables, but does NOT require any particular framework/library (other than google.visualizations):
http://code.google.com/apis/ajax/playground/?type=visualization#table
And there are other options to... especially if you're using one of the other JS frameworks. Dojo, Prototype, etc all have usable "table enhancement" plugins that provide at minimum table sorting functionality. Many provide more, but I'll restate...I've yet to come across one as powerful and as FAST as datatables.net.

Table Sorting with :hover arrows effect. Simply add the class .order to the <th> element of each column to be ordered
function table_sort() {
const styleSheet = document.createElement('style')
styleSheet.innerHTML = `
.order-inactive span {
visibility:hidden;
}
.order-inactive:hover span {
visibility:visible;
}
.order-active span {
visibility: visible;
}
`
document.head.appendChild(styleSheet)
document.querySelectorAll('th.order').forEach(th_elem => {
let asc = true
const span_elem = document.createElement('span')
span_elem.style = "font-size:0.8rem; margin-left:0.5rem"
span_elem.innerHTML = "▼"
th_elem.appendChild(span_elem)
th_elem.classList.add('order-inactive')
const index = Array.from(th_elem.parentNode.children).indexOf(th_elem)
th_elem.addEventListener('click', (e) => {
document.querySelectorAll('th.order').forEach(elem => {
elem.classList.remove('order-active')
elem.classList.add('order-inactive')
})
th_elem.classList.remove('order-inactive')
th_elem.classList.add('order-active')
if (!asc) {
th_elem.querySelector('span').innerHTML = '▲'
} else {
th_elem.querySelector('span').innerHTML = '▼'
}
const arr = Array.from(th_elem.closest("table").querySelectorAll('tbody tr'))
arr.sort((a, b) => {
const a_val = a.children[index].innerText
const b_val = b.children[index].innerText
return (asc) ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)
})
arr.forEach(elem => {
th_elem.closest("table").querySelector("tbody").appendChild(elem)
})
asc = !asc
})
})
}
table_sort()
<table>
<thead>
<tr>
<th class="order">Country</th>
<th class="order">Date</th>
<th class="order">Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>France</td>
<td>2001-01-01</td>
<td><i>25</i></td>
</tr>
<tr>
<td><a href=#>spain</a></td>
<td><i>2005-05-05</i></td>
<td></td>
</tr>
<tr>
<td><b>Lebanon</b></td>
<td><a href=#>2002-02-02</a></td>
<td><b>-17</b></td>
</tr>
<tr>
<td><i>Argentina</i></td>
<td>2005-04-04</td>
<td><a href=#>100</a></td>
</tr>
<tr>
<td>USA</td>
<td></td>
<td>-6</td>
</tr>
</tbody>
</table>

You could deal with a json array and the sort function. It is a pretty easy maintanable structure to manipulate (ex: sorting).
Untested, but here's the idea. That would support multiple ordering and sequential ordering if you pass in a array in which you put the columns in the order they should be ordered by.
var DATA_TABLE = {
{name: 'George', lastname: 'Blarr', age:45},
{name: 'Bob', lastname: 'Arr', age: 20}
//...
};
function sortDataTable(arrayColNames, asc) { // if not asc, desc
for (var i=0;i<arrayColNames.length;i++) {
var columnName = arrayColNames[i];
DATA_TABLE = DATA_TABLE.sort(function(a,b){
if (asc) {
return (a[columnName] > b[columnName]) ? 1 : -1;
} else {
return (a[columnName] < b[columnName]) ? 1 : -1;
}
});
}
}
function updateHTMLTable() {
// update innerHTML / textContent according to DATA_TABLE
// Note: textContent for firefox, innerHTML for others
}
Now let's imagine you need to order by lastname, then name, and finally by age.
var orderAsc = true;
sortDataTable(['lastname', 'name', 'age'], orderAsc);
It should result in something like :
{name: 'Jack', lastname: 'Ahrl', age: 20},
{name: 'Jack', lastname: 'Ahrl', age: 22},
//...

Here is a complete example using pure JavaScript. The algorithm used for sorting is basically BubbleSort. Here is a Fiddle.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function sort(ascending, columnClassName, tableId) {
var tbody = document.getElementById(tableId).getElementsByTagName(
"tbody")[0];
var rows = tbody.getElementsByTagName("tr");
var unsorted = true;
while (unsorted) {
unsorted = false
for (var r = 0; r < rows.length - 1; r++) {
var row = rows[r];
var nextRow = rows[r + 1];
var value = row.getElementsByClassName(columnClassName)[0].innerHTML;
var nextValue = nextRow.getElementsByClassName(columnClassName)[0].innerHTML;
value = value.replace(',', '.'); // in case a comma is used in float number
nextValue = nextValue.replace(',', '.');
if (!isNaN(value)) {
value = parseFloat(value);
nextValue = parseFloat(nextValue);
}
if (ascending ? value > nextValue : value < nextValue) {
tbody.insertBefore(nextRow, row);
unsorted = true;
}
}
}
};
</script>
</head>
<body>
<table id="content-table">
<thead>
<tr>
<th class="id">ID asc des
</th>
<th class="country">Country asc des
</th>
<th class="some-fact">Some fact asc
des
<th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">001</td>
<td class="country">Germany</td>
<td class="some-fact">16.405</td>
</tr>
<tr>
<td class="id">002</td>
<td class="country">France</td>
<td class="some-fact">10.625</td>
</tr>
<tr>
<td class="id">003</td>
<td class="country">UK</td>
<td class="some-fact">15.04</td>
</tr>
<tr>
<td class="id">004</td>
<td class="country">China</td>
<td class="some-fact">13.536</td>
</tr>
</tbody>
</table>
</body>
</html>
You can also check out the source from here: https://github.com/wmentzel/table-sort

Sorting table rows by cell.
1. Little simpler and has some features.
2. Distinguish 'number' and 'string' on sorting
3. Add toggle to sort by ASC, DESC
var index; // cell index
var toggleBool; // sorting asc, desc
function sorting(tbody, index){
this.index = index;
if(toggleBool){
toggleBool = false;
}else{
toggleBool = true;
}
var datas= new Array();
var tbodyLength = tbody.rows.length;
for(var i=0; i<tbodyLength; i++){
datas[i] = tbody.rows[i];
}
// sort by cell[index]
datas.sort(compareCells);
for(var i=0; i<tbody.rows.length; i++){
// rearrange table rows by sorted rows
tbody.appendChild(datas[i]);
}
}
function compareCells(a,b) {
var aVal = a.cells[index].innerText;
var bVal = b.cells[index].innerText;
aVal = aVal.replace(/\,/g, '');
bVal = bVal.replace(/\,/g, '');
if(toggleBool){
var temp = aVal;
aVal = bVal;
bVal = temp;
}
if(aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)){
return parseFloat(aVal) - parseFloat(bVal);
}
else{
if (aVal < bVal){
return -1;
}else if (aVal > bVal){
return 1;
}else{
return 0;
}
}
}
below is html sample
<table summary="Pioneer">
<thead>
<tr>
<th scope="col" onclick="sorting(tbody01, 0)">No.</th>
<th scope="col" onclick="sorting(tbody01, 1)">Name</th>
<th scope="col" onclick="sorting(tbody01, 2)">Belong</th>
<th scope="col" onclick="sorting(tbody01, 3)">Current Networth</th>
<th scope="col" onclick="sorting(tbody01, 4)">BirthDay</th>
<th scope="col" onclick="sorting(tbody01, 5)">Just Number</th>
</tr>
</thead>
<tbody id="tbody01">
<tr>
<td>1</td>
<td>Gwanshic Yi</td>
<td>Gwanshic Home</td>
<td>120000</td>
<td>1982-03-20</td>
<td>124,124,523</td>
</tr>
<tr>
<td>2</td>
<td>Steve Jobs</td>
<td>Apple</td>
<td>19000000000</td>
<td>1955-02-24</td>
<td>194,523</td>
</tr>
<tr>
<td>3</td>
<td>Bill Gates</td>
<td>MicroSoft</td>
<td>84300000000</td>
<td>1955-10-28</td>
<td>1,524,124,523</td>
</tr>
<tr>
<td>4</td>
<td>Larry Page</td>
<td>Google</td>
<td>39100000000</td>
<td>1973-03-26</td>
<td>11,124,523</td>
</tr>
</tbody>
</table>

In case your table does not have ths but only tds (with headers included) you can try the following which is based on Nick Grealy's answer above:
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
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));
// do the work...
document.querySelectorAll('tr:first-child td').forEach(td => td.addEventListener('click', (() => {
const table = td.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(td.parentNode.children).indexOf(td), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
font-family: 'Roboto', sans-serif;
text-transform:capitalize;
overflow:hidden;
margin: 0 auto;
text-align:left;
}
table {
color:#666;
font-size:12px;
background:#124;
border:#ccc 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border-collapse: collapse;
width: 100%;
}
table td {
padding:10px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
width: 6.9in;
}
table tbody tr:first-child td
{
background: #124!important;
color:#fff;
}
table tbody tr th
{
padding:10px;
border-left: 1px solid #e0e0e0;
background: #124!important;
color:#fff;
}
<table>
<tr><td>Country</td><td>Date</td><td>Size</td></tr>
<tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
<tr><td>spain</td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td><b>-17</b></td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>

Another approach to sort HTML table. (based on W3.JS HTML Sort)
var collection = [{
"Country": "France",
"Date": "2001-01-01",
"Size": "25",
}, {
"Country": "spain",
"Date": "2005-05-05",
"Size": "",
}, {
"Country": "Lebanon",
"Date": "2002-02-02",
"Size": "-17",
}, {
"Country": "Argentina",
"Date": "2005-04-04",
"Size": "100",
}, {
"Country": "USA",
"Date": "",
"Size": "-6",
}]
for (var j = 0; j < 3; j++) {
$("#myTable th:eq(" + j + ")").addClass("control-label clickable");
$("#myTable th:eq(" + j + ")").attr('onClick', "w3.sortHTML('#myTable', '.item', 'td:nth-child(" + (j + 1) + ")')");
}
$tbody = $("#myTable").append('<tbody></tbody>');
for (var i = 0; i < collection.length; i++) {
$tbody = $tbody.append('<tr class="item"><td>' + collection[i]["Country"] + '</td><td>' + collection[i]["Date"] + '</td><td>' + collection[i]["Size"] + '</td></tr>');
}
.control-label:after {
content: "*";
color: red;
}
.clickable {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>
<table id="myTable" class="w3-table-all">
<thead>
<tr>
<th>Country</th>
<th>Date</th>
<th>Size</th>
</tr>
</thead>
</table>

Another compact but readable solution:
It just requires adding the class .order to the <th> element of each column to be ordered
document.querySelectorAll('th.order').forEach(th_elem => {
let asc=true
const index = Array.from(th_elem.parentNode.children).indexOf(th_elem)
th_elem.addEventListener('click', (e) => {
const arr = [... th_elem.closest("table").querySelectorAll('tbody tr')]
arr.sort( (a, b) => {
const a_val = a.children[index].innerText
const b_val = b.children[index].innerText
return (asc) ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)
})
arr.forEach(elem => {
th_elem.closest("table").querySelector("tbody").appendChild(elem)
})
asc = !asc
})
})

Sorting html table column on page load
var table = $('table#all_items_table');
var rows = table.find('tr:gt(0)').toArray().sort(comparer(3));
for (var i = 0; i < rows.length; i++) {
table.append(rows[i])
}
function comparer(index) {
return function (a, b) {
var v1= getCellValue(a, index),
v2= getCellValue(b, index);
return $.isNumeric(v2) && $.isNumeric(v1) ? v2 - v1: v2.localeCompare(v1)
}
}
function getCellValue(row, index) {
return parseFloat($(row).children('td').eq(index).html().replace(/,/g,'')); //1234234.45645->1234234
}

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid;
border-collapse: collapse;
}
td , th {
padding: 5px;
width: 100px;
}
th {
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort car objects on age.</p>
<p id="demo"></p>
<script>
var nameArrow = "", yearArrow = "";
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
yearACS = true;
function sortYear() {
if (yearACS) {
nameArrow = "";
yearArrow = "🔽";
cars.sort(function(a,b) {
return a.year - b.year;
});
yearACS = false;
}else {
nameArrow = "";
yearArrow = "🔼";
cars.sort(function(a,b) {
return b.year - a.year;
});
yearACS = true;
}
displayCars();
}
nameACS = true;
function sortName() {
if (nameACS) {
nameArrow = "🔽";
yearArrow = "";
cars.sort(function(a,b) {
x = a.type.toLowerCase();
y = b.type.toLowerCase();
if (x > y) {return 1;}
if (x < y) {return -1};
return 0;
});
nameACS = false;
} else {
nameArrow = "🔼";
yearArrow = "";
cars.sort(function(a,b) {
x = a.type.toUpperCase();
y = b.type.toUpperCase();
if (x > y) { return -1};
if (x <y) { return 1 };
return 0;
});
nameACS = true;
}
displayCars();
}
displayCars();
function displayCars() {
var txt = "<table><tr><th onclick='sortName()'>name " + nameArrow + "</th><th onclick='sortYear()'>year " + yearArrow + "</th><tr>";
for (let i = 0; i < cars.length; i++) {
txt += "<tr><td>"+ cars[i].type + "</td><td>" + cars[i].year + "</td></tr>";
}
txt += "</table>";
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

I have edited the code from one of the example here to use jquery.
It's still not 100% jquery though. Any thoughts on the two different versions, like what are the pros and cons of each?
function column_sort() {
getCellValue = (tr, idx) => $(tr).find('td').eq( idx ).text();
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));
table = $(this).closest('table')[0];
tbody = $(table).find('tbody')[0];
elm = $(this)[0];
children = elm.parentNode.children;
Array.from(tbody.querySelectorAll('tr')).sort( comparer(
Array.from(children).indexOf(elm), table.asc = !table.asc))
.forEach(tr => tbody.appendChild(tr) );
}
table.find('thead th').on('click', column_sort);

I'm very grateful for the accepted answer and jedwards' fix, but I also find them poorly readable. So here's my refactored and verbose version:
// Remember that strings are false positives for isNaN
const isEmptyOrNaN = (obj) => obj === "" || isNaN(obj);
const getCellValueInColumn = (tr, columnIdx) =>
tr.children[columnIdx].innerText || tr.children[columnIdx].textContent;
const compareCellValues = (cellValue1, cellValue2) => {
return isEmptyOrNaN(cellValue1) || isEmptyOrNaN(cellValue2)
? cellValue1.toString().localeCompare(cellValue2)
: cellValue1 - cellValue2;
};
const compareFnFactory = (columnIdx, ascending) => (firstEl, secondEl) => {
const cellValue1 = getCellValueInColumn(firstEl, columnIdx);
const cellValue2 = getCellValueInColumn(secondEl, columnIdx);
return ascending
? compareCellValues(cellValue1, cellValue2)
: compareCellValues(cellValue2, cellValue1);
};
document.querySelectorAll("th").forEach((th) =>
th.addEventListener("click", () => {
const table = th.closest("table");
const tbody = table.querySelector("tbody");
const columnIdx = Array.from(th.parentNode.children).indexOf(th);
const compareFn = compareFnFactory(columnIdx, (this.ascending = !this.ascending));
Array.from(tbody.querySelectorAll("tr"))
.sort(compareFn)
.forEach((tr) => tbody.appendChild(tr));
})
);
If you find any extra spaces or parenthesis, unnecessary indents, etc., it's because I've formatted the code with prettier.
I've wrapped this code inside a:
javascript: (function () {
// Code here
})();
and put it into a bookmarklet, so now I can sort columns inside Keycloak Admin Console.

I've found myself using #NickGrealy method to sort items and it works great!
(https://stackoverflow.com/a/49041392/18045902)
Issue I had is that i'm using a different format for date: dd-mm-YY instead of the ISO one.
As I'm passing data from a .php file as a string I had to convert the string in a date then compare with ><==
Substitute the compare function
// Returns a function responsible for sorting a specific column index
// (idx = columnIndex, asc = ascending order?).
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
// sort based on a numeric or localeCompare, based on type...
return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
? v1 - v2
: v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};
with this:
var comparer = function(idx, asc) {
// This is used by the array.sort() function...
return function(a, b) {
// This is a transient function, that is called straight away.
// It allows passing in different order of args, based on
// the ascending/descending order.
return function(v1, v2) {
if(v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)){
x = v1 - v2;
console.log(v1);
} else if(v1.includes("-")) {
var partsArray1 = v1.split('-');
var partsArray2 = v2.split('-');
var data1 = new Date(partsArray1[2],partsArray1[1],partsArray1[0]);
var data2 = new Date(partsArray2[2],partsArray2[1],partsArray2[0]);
if(data1>data2){
x=1;
} else if (data1<data2) {
x=-1;
} else if (data1==data2) {
x=0;
}
} else {
x = v1.toString().localeCompare(v2);
}
// sort based on a numeric or localeCompare, based on type...
//return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2))
// ? v1 - v2
// : v1.toString().localeCompare(v2);
return x;
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}
};
NOTE: this will only work if the date you are trying to parse is a string in the dd-mm-YY format.
If you need a different format change the includes() and the split() character (in my case is "-") and the order of the date you are creating with Date().
If there's something wrong with this method please comment.

Develop Reference

JavaScript is the programming language of the Web.

Isolating events in Angular 1.5 Component Instances - javascript

Related

Sort a table- Number, Name and more [duplicate]

Reordering elements on an HTML form using Vanila JS: what's the best practice in terms of performance? [duplicate]

Visible bind not updating after Observable change with Knockout

AngularJS sum of rows ng-repeat

Sorting HTML table with JavaScript

Categories

Resources