Scribd
Upload
161 views

Table Sorting Scripts & Example

The document provides instructions for sorting data in an HTML table with JavaScript. It is a two-step process: 1) Copy the sorting script into the HTML head, and 2) Add code to each table header to trigger the sorting script on click. The sorting script converts values to strings for consistent sorting, populates an array with the column contents, sorts the array, reorders the table rows to match the sorted array, and moves the rows to the top of the table.

Uploaded by

api-3709409
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
161 views

Table Sorting Scripts & Example

The document provides instructions for sorting data in an HTML table with JavaScript. It is a two-step process: 1) Copy the sorting script into the HTML head, and 2) Add code to each table header to trigger the sorting script on click. The sorting script converts values to strings for consistent sorting, populates an array with the column contents, sorts the array, reorders the table rows to match the sorted array, and moves the rows to the top of the table.

Uploaded by

api-3709409
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

-- two steps to install sort data table:

1. copy the coding into the head of your html document


2. add the last code into the body of your html document -->

<!-- step one: paste this code into the head of your html document -->

<head>

<script language="javascript">

<!-- this script and many more are available free online at -->
<!-- the javascript source!! http://javascript.internet.com -->

<!-- begin
function setdatatype(cvalue)
{
// this function converts dates and numbers for proper array
// sorting when in the sort function
var isdate = new date(cvalue);
if (isdate == "nan")
{
if (isnan(cvalue))
{
// the value is a string, make all characters in
// string upper case to assure proper a-z sort
cvalue = cvalue.touppercase();
return cvalue;
}
else
{
// value is a number, to prevent string sorting of a number
// add an additional digit that is the + to the length of
// the number when it is a string
var mynum;
mynum = string.fromcharcode(48 + cvalue.length) + cvalue;
return mynum;
}
}
else
{
// value to sort is a date, remove all of the punctuation and
// and return the string number
//bug - string and not numerical sort .....
// ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.)
var mydate = new string();
mydate = isdate.getfullyear() + " " ;
mydate = mydate + isdate.getmonth() + " ";
mydate = mydate + isdate.getdate(); + " ";
mydate = mydate + isdate.gethours(); + " ";
mydate = mydate + isdate.getminutes(); + " ";
mydate = mydate + isdate.getseconds();
//mydate = string.fromcharcode(48 + mydate.length) + mydate;
return mydate ;
}
}
function sorttable(col, tabletosort)
{
var icurcell = col + tabletosort.cols;
var totalrows = tabletosort.rows.length;
var bsort = 0;
var colarray = new array();
var oldindex = new array();
var indexarray = new array();
var barray = new array();
var newrow;
var newcell;
var i;
var c;
var j;
// ** populate the array colarray with contents of the column selected
for (i=1; i < tabletosort.rows.length; i++)
{
colarray[i - 1] = setdatatype(tabletosort.cells(icurcell).innertext);
icurcell = icurcell + tabletosort.cols;
}
// ** copy array for comparison after sort
for (i=0; i < colarray.length; i++)
{
barray[i] = colarray[i];
}
// ** sort the column items
//alert ( colarray );
colarray.sort();
//alert ( colarray );
for (i=0; i < colarray.length; i++)
{ // loop through the new sorted array
indexarray[i] = (i+1);
for(j=0; j < barray.length; j++)
{ // loop through the old array
if (colarray[i] == barray[j])
{ // when the item in the old and new match, place the
// current row number in the proper position in the
// new order array so rows can be moved ....
// make sure current row number is not already in the
// new order array
for (c=0; c<i; c++)
{
if ( oldindex[c] == (j+1) )
{
bsort = 1;
}
}
if (bsort == 0)
{
oldindex[i] = (j+1);
}
bsort = 0;
}
}
}
// ** sorting complete, add new rows to base of table ....
for (i=0; i<oldindex.length; i++)
{
newrow = tabletosort.insertrow();
for (c=0; c<tabletosort.cols; c++)
{
newcell = newrow.insertcell();
newcell.innerhtml = tabletosort.rows(oldindex[i]).cells(c).innerhtml;
}
}
//move new rows to top of table ....
for (i=1; i<totalrows; i++)
{
tabletosort.moverow((tabletosort.rows.length -1),1);
}
//delete the old rows from the bottom of the table ....
for (i=1; i<totalrows; i++)
{
tabletosort.deleterow();
}
}
// end -->
</script>

</head>

<!-- step two: copy this code into the body of your html document -->

<body>

<table width="75%" border=1 cellspacing=1 cellpadding=1 name="rstable" id=rstable


cols=5>
<tr bgcolor=mediumblue>
<td><a href="javascript:sorttable(0, rstable);"><font
color=white><b>id</font></b></a></td>
<td><a href="javascript:sorttable(1, rstable);"><font
color=white><b>name</font></b></a></td>
<td><a href="javascript:sorttable(2, rstable);"><font
color=white><b>date</font></b></a></td>
<td><a href="javascript:sorttable(3, rstable);"><font
color=white><b>phone</font></b></a></td>
<td><a href="javascript:sorttable(4, rstable);"><font
color=white><b>workflow</font></b></a></td>
</tr></font>
<tr>
<td>1</td>
<td>andy berry</td>
<td>4/9/72</td>
<td>763-555-1212</td>
<td>review</td>
</tr>
<tr>
<td>2</td>
<td>dan developer</td>
<td>9/3/63</td>
<td>215-555-1400</td>
<td>same</td>
</tr>
<tr>
<td>3</td>
<td>john javascript</td>
<td>3/4/71</td>
<td>612-555-0987</td>
<td>review</td>
</tr>
<tr>
<td>4</td>
<td>jerry jspage</td>
<td>8/2/71</td>
<td>215-555-7654</td>
<td>same</td>
</tr>
<tr>
<td>5</td>
<td>mary mainframe</td>
<td>3/28/70</td>
<td>763-555-8295</td>
<td>review</td>
</tr>
<tr>
<td>6</td>
<td>elaine ecommerce</td>
<td>2/28/29</td>
<td>612-555-1338</td>
<td>review</td>
</tr>
<tr>
<td>7</td>
<td>john smith</td>
<td>12/31/00</td>
<td>610-555-0987</td>
<td>same</td>
</tr>
<tr>
<td>8</td>
<td>candy coder</td>
<td>4/1/70</td>
<td>000-555-9099</td>
<td>same</td>
</tr>
<tr>
<td>9</td>
<td>pippy long stocking</td>
<td>1/1/30</td>
<td>613-555-1338</td>
<td>different</td>
</tr>
<tr>
<td>10</td>
<td>111222</td>
<td>2/2/01</td>
<td>345-555-7654</td>
<td>different</td>
</tr>
<tr>
<td>11</td>
<td>apple man</td>
<td>3/13/74</td>
<td>215-555-4043</td>
<td>different</td>
</tr>
</table>

<p><center>
<font face="arial, helvetica" size"-2">free javascripts provided<br>
by <a href="http://javascriptsource.com">the javascript source</a></font>
</center><p>

<!-- script size: 7.51 kb -->

You might also like