Here i have given the code of Multiple Column Sort
<html>
<head>
<script>
function generateCompareTRs(iCol,sortType)
{
return function compareTRs(oTR1, oTR2)
{
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;
if(sortType=='Desc')
{
return -sValue1.localeCompare(sValue2);
}
else
{
return sValue1.localeCompare(sValue2);
}
};
}
function sortTable(sTableID, iCol)
{
var sorttype = document.getElementById('sortTypeHidden').value;
if(sorttype=='Desc')
{
document.getElementById('sortTypeHidden').value='Asce';
}
else
{
document.getElementById('sortTypeHidden').value='Desc';
}
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
for (var i=0; i <colDataRows.length; i++)
{
aTRs[i] = colDataRows[i];
}
aTRs.sort(generateCompareTRs(iCol,sorttype));
var oFragment = document.createDocumentFragment();
for (var i=0; i <aTRs.length; i++)
{
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
}
</script>
</head>
<body>
<input type="hidden" id="sortTypeHidden" name="Asce">
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort', 0);" style="cursor:pointer">Last Name </th>
<th onclick="sortTable('tblSort', 1);" style="cursor:pointer">First Name </th>
<th onclick="sortTable('tblSort', 2);" style="cursor:pointer">Third < /th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith </td>
<td>John </td>
<td>A Third </td>
</tr>
<tr>
<td>Johnson </td>
<td> Betty </td>
<td>B Third </td>
</tr>
<tr>
<td>Henderson </td>
<td>Nathan < /td>
<td>C Third </td>
</tr>
<tr>
<td>Williams </td>
<td>James </td>
<td>D Third </td>
</tr>
<tr>
<td>Gilliam </td>
<td>Michael </td>
<td>E Third </td>
</tr>
<tr>
<td>Walker </td>
<td>Matthew </td>
<td>F Third </td>
</tr>
</tbody>
</table>
</body>
</html>
How it works
It works as like as Sorting single column Table
Sorting is done by getting the values of the specified column [dom collections] from the table and storing it to an array then sorting the array values.
Now the tr values are sorted using generateCompareTRs() and stored in a array ,
generateCompareTRs() will return another function compareTRs instead of handling it in one function because In general sorting is done using sort () api , which in turn calls another function generateCompareTRs() , in generateCompareTRs compareTRs function added because
compareTRs is a comparison function
an short note about comparison function
A comparison function is a function with a specific algorithm. It’s helpful to take a look at a basic comparison function before continuing with the explanation:
function comparison_function(value1, value2) {
if (value1 < value 2) {
return –1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
As you can see, a comparison function compares two values, which is why a comparison function
always has two arguments. If the first argument should come before the second argument, the
function returns –1. If the first argument should come after the second argument, the function
returns 1. If, however, the arguments are equal, the function returns 0. The comparison function
is used in the sort()
As said in desc , comparison function has got only two arguments , but in our case we need two additional argument. The index of the column which is to be sorted and what type of sorting needs to be done(i.e Ascending or Descending Sort ) , so we are constructing a function generateCompareTRs which in turn construct another function compareTRs
And for descending sorting putting a negative sign will do -string1.localeCompare(string2);
Here the sorted values needs to be appended in the table by replacing old tr,
That is done by creating document fragment and adding all the elements (array values) to it
Then appending all child nodes of document fragment back in to the tbody element
ps: source: Wrox Professional JavaScriptTM for Web Developers
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment