HTML Table Column Sorting

Here I’m showing a simplest way of how to make each column do sorting in ascending and descending orders using simple javascript (you may definitely get an easy way of doing this from jQuery). But this one surely useful for some people at least.

to see the results, copy/download the code and open this in your browser, and click on any header’s uparrow and downarrow icons, then you see the results.
javascript code:-
<code>
function Compare(a, b) {
var aVal = a.value;
var bVal = b.value;
return (aVal == bVal ? 0 : (aVal &gt; bVal ? 1 : -1));
}
function CompareNumbers(a, b) {
var aVal = parseInt(a.value);
var bVal = parseInt(b.value);
return (aVal – bVal);
}
function sortTable(sortOn,sortOrder) {
var table = document.getElementById(‘results’);
var tbody = table.getElementsByTagName(‘TBODY’)[0];
var thead = table.getElementsByTagName(‘THEAD’)[0];
var rows = tbody.getElementsByTagName(‘TR’);
var rowArray = new Array();
for (var i=0, length=rows.length; i&lt;length; i++) {
rowArray[i] = new Object;
rowArray[i].oldIndex = i;
rowArray[i].value = rows[i].getElementsByTagName(‘td’)[sortOn].firstChild.nodeValue;
if (rowArray[i].value == null){
var firstChild=rows[i].getElementsByTagName(‘td’)[sortOn].firstChild;
rowArray[i].value=firstChild.toString().substring(26, 35);
}
}
if(sortOrder==’dsc’){
if (sortOn==0){
rowArray.sort(CompareNumbers);
}else{
rowArray.sort(Compare);
}
rowArray.reverse();
}else{
if (sortOn==0){
rowArray.sort(CompareNumbers);
}else{
rowArray.sort(Compare);
}
}
var newTbody = document.createElement(‘tbody’);
for (var i=0, length=rowArray.length ; i&lt;length; i++) {
var row=rows[rowArray[i].oldIndex].cloneNode(true)
row.bgColor=”white”
if(i%2==1)
row.bgColor=”#FAF8CC”;
newTbody.appendChild(row);
}
var L=tbody.length;
while(L)table.removeChild(tbody[–L]);
var root=document.getElementById(‘ITable’);
var tab=document.createElement(‘table’);
tab.className=”mytable”;
tab.setAttribute(“WIDTH”,”600″);
tab.setAttribute(“border”,”1″);
tab.setAttribute(“ID”,”results”);
tab.appendChild(thead);
tab.appendChild(newTbody);
root.removeChild(table);
root.appendChild(tab);
}
</code>
CSS code:-
a{
font-weight: bold;
font-family: Times New Roman;
font-style: normal;
font-size: 15px;
color: black;
text-decoration: none;
display: inline;
margin: 1;
}

Here is complete HTML code to:
<HTML>
<HEAD>
<TITLE>
HTML table sorting
</TITLE>
<SCRIPT TYPE=”text/javascript”>
function Compare(a, b) {
var aVal = a.value;
var bVal = b.value;
return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
}
function CompareNumbers(a, b) {
var aVal = parseInt(a.value);
var bVal = parseInt(b.value);
return (aVal – bVal);
}
function sortTable(sortOn,sortOrder) {
var table = document.getElementById(‘results’);
var tbody = table.getElementsByTagName(‘TBODY’)[0];
var thead = table.getElementsByTagName(‘THEAD’)[0];
var rows = tbody.getElementsByTagName(‘TR’);
var rowArray = new Array();
for (var i=0, length=rows.length; i<length; i++) {
rowArray[i] = new Object;
rowArray[i].oldIndex = i;
rowArray[i].value = rows[i].getElementsByTagName(‘td’)[sortOn].firstChild.nodeValue;
if (rowArray[i].value  == null){
var firstChild=rows[i].getElementsByTagName(‘td’)[sortOn].firstChild;
rowArray[i].value=firstChild.toString().substring(26, 35);
}
}
if(sortOrder==’dsc’){
if (sortOn==0){
rowArray.sort(CompareNumbers);
}else{
rowArray.sort(Compare);
}
rowArray.reverse();
}else{
if (sortOn==0){
rowArray.sort(CompareNumbers);
}else{
rowArray.sort(Compare);
}
}
var newTbody = document.createElement(‘tbody’);
for (var i=0, length=rowArray.length ; i<length; i++) {
var row=rows[rowArray[i].oldIndex].cloneNode(true)
row.bgColor=”white”
if(i%2==1)
row.bgColor=”#FAF8CC”;
newTbody.appendChild(row);
}
var L=tbody.length;
while(L)table.removeChild(tbody[–L]);
var root=document.getElementById(‘IDMTable’);
var tab=document.createElement(‘table’);
tab.className=”mytable”;
tab.setAttribute(“WIDTH”,”600″);
tab.setAttribute(“border”,”1″);
tab.setAttribute(“ID”,”results”);
tab.appendChild(thead);
tab.appendChild(newTbody);
root.removeChild(table);
root.appendChild(tab);
}

</SCRIPT>

<STYLE TYPE=”text/css”>

a{
font-weight: bold;
font-family: Times New Roman;
font-style: normal;
font-size: 15px;
color: black;
text-decoration: none;
display: inline;
margin: 1;
}

</STYLE>

</HEAD>
<BODY>
</BR />
<H3>HTML Table with column Sorting</H3>
<FORM ACTION=”” METHOD=”POST” NAME=”searchForm”>

<BR />
<div id=”IDMTable” >
<TABLE WIDTH=”600″ BORDER=1 ID=”results”>
<THEAD>
<TR BGCOLOR=”#A0CFEC”>
<TH ALIGN=left WIDTH=”25%”>UID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=”#” onclick=”sortTable(0,’asc’);” href=”javascript:;”>&uArr;</a>
<a href=”#” onclick=”sortTable(0,’dsc’);”>&dArr;</a>
</TH>
<TH ALIGN=left WIDTH=”25%”>NID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=”#” onclick=”sortTable(1,’asc’);” href=”javascript:;”>&uArr;</a>
<a href=”#” onclick=”sortTable(1,’dsc’);”>&dArr;</a>
</TH>
<TH ALIGN=left WIDTH=”25%”>First Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=”#” onclick=”sortTable(2,’asc’);” href=”javascript:;”>&uArr;</a>
<a href=”#” onclick=”sortTable(2,’dsc’);”>&dArr;</a>
</TH>
<TH ALIGN=left WIDTH=”25%”>Last Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=”#” onclick=”sortTable(3,’asc’);” href=”javascript:;”>&uArr;</a>
<a href=”#” onclick=”sortTable(3,’dsc’);”>&dArr;</a>
</TH>
</TR>
</THEAD>
<TBODY>

<TR BGCOLOR=>
<TD>45103</TD>
<TD>skaba</TD>
<TD>Sandra</TD>
<TD>Kabagambe</TD>
</TR>

<TR BGCOLOR=#FAF8CC>
<TD>27057</TD>
<TD>skale</TD>
<TD>Su</TD>
<TD>Kalender</TD>
</TR>

<TR BGCOLOR=>
<TD>64559</TD>
<TD>skalle</TD>
<TD>Sylvia</TD>
<TD>Kalley</TD>
</TR>

<TR BGCOLOR=#FAF8CC>
<TD>13235</TD>
<TD>rimsa</TD>
<TD>Rhin</TD>
<TD>Imsail</TD>
</TR>

<TR BGCOLOR=>
<TD>46662</TD>
<TD>namile</TD>
<TD>Nancy</TD>
<TD>Amile</TD>
</TR>

<TR BGCOLOR=#FAF8CC>
<TD>31805</TD>
<TD>mmclure</TD>
<TD>Maria</TD>
<TD>Mclure</TD>
</TR>

</TBODY>
</TABLE>
</div>
</FORM>
</BODY>
</HTML>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: