Here is how you can sort your HTML data using a simple Javascript function WITHOUT using any external library.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sort Table using Javascript</title>
<script type="text/javascript">
/*
* These variables as name suggests store the column index based on
* which the table wil be sorted and also the sorting order
*/
var sortOrder;
var sortColumn;
function sortTable(column) {
/*
* First we will determine if the user has clicked the table for first
* time indicating that the table should be sorted in Ascending order. If
* user has clicked on it second time, then table will be sorted in
* descending order.
*/
if (sortColumn != column) {
sortColumn = column;
sortOrder = "asc";
} else if (sortColumn == column && sortOrder == "asc") {
sortOrder = "desc";
} else if (sortColumn == column && sortOrder == "desc") {
sortOrder = "asc";
}
var tableData = document.getElementById("myTable");
//This variable stores the complete Table Data
var tableRows = tableData.rows;
// Here we will convert the table data into an array for easy processing
var sortDataArray = [];
for (index = 1; index < tableRows.length; index++) {
sortDataArray.push(tableRows[index]);
}
/*
* Here we will pass the data array along with the column index, and
* sorting order to the data sorting algorithm. Here Merge Sort algorithm
* is being used to sort data.
*/
mergeSort(sortDataArray, 0, sortDataArray.length - 1, sortColumn,
sortOrder);
/*
* And Voila, sorting algorithm has sorted the data and returned data in a sorted array.
* Now all that's left is to set the sorted table data back into the html table.
*/
var sortedTableBody = "";
for (rowIndex = 0; rowIndex < sortDataArray.length; rowIndex++) {
sortedTableBody += "<tr>";
var rowCells = sortDataArray[rowIndex].cells;
for (columnIndex = 0; columnIndex < rowCells.length; columnIndex++) {
sortedTableBody += "<td>" + rowCells[columnIndex].innerHTML
+ "</td>";
}
sortedTableBody += "</tr>";
}
document.getElementById("myTableBody").innerHTML = sortedTableBody;
}
function mergeSort(arr, l, r, sortColumn, sortOrder) {
if (l < r) {
var m = Math.floor(l + (r - l) / 2);
mergeSort(arr, l, m, sortColumn, sortOrder);
mergeSort(arr, m + 1, r, sortColumn, sortOrder);
merge(arr, l, m, r, sortColumn, sortOrder);
}
}
function merge(arr, l, m, r, sortColumn, sortOrder) {
var i;
var j;
var k;
var n1 = m - l + 1;
var n2 = r - m;
var L = [];
var R = [];
for (i = 0; i < n1; i++) {
L[i] = arr[l + i];
}
for (j = 0; j < n2; j++) {
R[j] = arr[m + 1 + j];
}
i = 0;
j = 0;
k = l;
if (sortOrder == "asc") {
while (i < n1 && j < n2) {
if (L[i].cells[sortColumn].innerHTML <= R[j].cells[sortColumn].innerHTML) {
arr[k] = L[i];
i++;
} else {
arr[k] = R[j];
j++;
}
k++;
}
} else if (sortOrder == "desc") {
while (i < n1 && j < n2) {
if (L[i].cells[sortColumn].innerHTML >= R[j].cells[sortColumn].innerHTML) {
arr[k] = L[i];
i++;
} else {
arr[k] = R[j];
j++;
}
k++;
}
}
while (i < n1) {
arr[k] = L[i];
i++;
k++;
}
while (j < n2) {
arr[k] = R[j];
j++;
k++;
}
}
</script>
</head>
<body>
<!-- Dummy Table to perform Sort Operation on Columns -->
<table id="myTable" border="1">
<thead>
<tr>
<th onclick="sortTable(0)">Alphabetical Data</th>
<th onclick="sortTable(1)">Numerical Data</th>
<th onclick="sortTable(2)">Alphanumerical Data</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>Hello</td>
<td>132</td>
<td>CR7</td>
</tr>
<tr>
<td>Alphabet</td>
<td>798</td>
<td>LM10</td>
</tr>
<tr>
<td>Coding</td>
<td>498</td>
<td>07CL</td>
</tr>
<tr>
<td>Redefined</td>
<td>369</td>
<td>18WC</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sort Table using Javascript</title>
<script type="text/javascript">
/*
* These variables as name suggests store the column index based on
* which the table wil be sorted and also the sorting order
*/
var sortOrder;
var sortColumn;
function sortTable(column) {
/*
* First we will determine if the user has clicked the table for first
* time indicating that the table should be sorted in Ascending order. If
* user has clicked on it second time, then table will be sorted in
* descending order.
*/
if (sortColumn != column) {
sortColumn = column;
sortOrder = "asc";
} else if (sortColumn == column && sortOrder == "asc") {
sortOrder = "desc";
} else if (sortColumn == column && sortOrder == "desc") {
sortOrder = "asc";
}
var tableData = document.getElementById("myTable");
//This variable stores the complete Table Data
var tableRows = tableData.rows;
// Here we will convert the table data into an array for easy processing
var sortDataArray = [];
for (index = 1; index < tableRows.length; index++) {
sortDataArray.push(tableRows[index]);
}
/*
* Here we will pass the data array along with the column index, and
* sorting order to the data sorting algorithm. Here Merge Sort algorithm
* is being used to sort data.
*/
mergeSort(sortDataArray, 0, sortDataArray.length - 1, sortColumn,
sortOrder);
/*
* And Voila, sorting algorithm has sorted the data and returned data in a sorted array.
* Now all that's left is to set the sorted table data back into the html table.
*/
var sortedTableBody = "";
for (rowIndex = 0; rowIndex < sortDataArray.length; rowIndex++) {
sortedTableBody += "<tr>";
var rowCells = sortDataArray[rowIndex].cells;
for (columnIndex = 0; columnIndex < rowCells.length; columnIndex++) {
sortedTableBody += "<td>" + rowCells[columnIndex].innerHTML
+ "</td>";
}
sortedTableBody += "</tr>";
}
document.getElementById("myTableBody").innerHTML = sortedTableBody;
}
function mergeSort(arr, l, r, sortColumn, sortOrder) {
if (l < r) {
var m = Math.floor(l + (r - l) / 2);
mergeSort(arr, l, m, sortColumn, sortOrder);
mergeSort(arr, m + 1, r, sortColumn, sortOrder);
merge(arr, l, m, r, sortColumn, sortOrder);
}
}
function merge(arr, l, m, r, sortColumn, sortOrder) {
var i;
var j;
var k;
var n1 = m - l + 1;
var n2 = r - m;
var L = [];
var R = [];
for (i = 0; i < n1; i++) {
L[i] = arr[l + i];
}
for (j = 0; j < n2; j++) {
R[j] = arr[m + 1 + j];
}
i = 0;
j = 0;
k = l;
if (sortOrder == "asc") {
while (i < n1 && j < n2) {
if (L[i].cells[sortColumn].innerHTML <= R[j].cells[sortColumn].innerHTML) {
arr[k] = L[i];
i++;
} else {
arr[k] = R[j];
j++;
}
k++;
}
} else if (sortOrder == "desc") {
while (i < n1 && j < n2) {
if (L[i].cells[sortColumn].innerHTML >= R[j].cells[sortColumn].innerHTML) {
arr[k] = L[i];
i++;
} else {
arr[k] = R[j];
j++;
}
k++;
}
}
while (i < n1) {
arr[k] = L[i];
i++;
k++;
}
while (j < n2) {
arr[k] = R[j];
j++;
k++;
}
}
</script>
</head>
<body>
<!-- Dummy Table to perform Sort Operation on Columns -->
<table id="myTable" border="1">
<thead>
<tr>
<th onclick="sortTable(0)">Alphabetical Data</th>
<th onclick="sortTable(1)">Numerical Data</th>
<th onclick="sortTable(2)">Alphanumerical Data</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>Hello</td>
<td>132</td>
<td>CR7</td>
</tr>
<tr>
<td>Alphabet</td>
<td>798</td>
<td>LM10</td>
</tr>
<tr>
<td>Coding</td>
<td>498</td>
<td>07CL</td>
</tr>
<tr>
<td>Redefined</td>
<td>369</td>
<td>18WC</td>
</tr>
</tbody>
</table>
</body>
</html>
