Alternate Way - Sorting Table Scripts

<!doctype html public "-//w3c//dtd xhtml 1.
0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">






<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>brainjar.com: table sort demo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* table styles. */
table {
border-color: #000000;
border-spacing: 0px;
border-style: solid;
border-width: 2px;
cell-spacing: 0px;
}
td, th {
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
padding: 2px 0.5em;
white-space: nowrap;
}
td.numeric {
text-align: right;
}
th {
background-color: #c0c0c0;
}
th.mainheader {
background-color: #808080;
color: #ffffff;
text-align: left;
}
th a {
color: #000080;
text-decoration: none;
}
th a:visited {
color: #000080;
}
th a:active, th a:hover {
color: #800000;
text-decoration: underline;
}
tr.alternaterow {
background-color: #e0e0e0;
}
td.sortedcolumn {
background-color: #f0f0f0;
}
th.sortedcolumn {
background-color: #b0b0b0;
}
tr.alternaterow td.sortedcolumn {
background-color: #d0d0d0;
}
</style>
<script type="text/javascript">//<![cdata[
//-----------------------------------------------------------------------------
// sorttable(id, col, rev)
//
// id - id of the table, tbody, thead or tfoot element to be sorted.
// col - index of the column to sort, 0 = first column, 1 = second column,
// etc.
// rev - if true, the column is sorted in reverse (descending) order
// initially.
//
// note: the team name column (index 1) is used as a secondary sort column and
// always sorted in ascending order.
//-----------------------------------------------------------------------------
function sorttable(id, col, rev) {
// get the table or table section to sort.

var tblel = document.getelementbyid(id);
// the first time this function is called for a given table, set up an
// array of reverse sort flags.
if (tblel.reversesort == null) {
tblel.reversesort = new array();
// also, assume the team name column is initially sorted.
tblel.lastcolumn = 1;
}
// if this column has not been sorted before, set the initial sort direction.
if (tblel.reversesort[col] == null)
tblel.reversesort[col] = rev;
// if this column was the last one sorted, reverse its sort direction.
if (col == tblel.lastcolumn)
tblel.reversesort[col] = !tblel.reversesort[col];
// remember this column as the last one sorted.

tblel.lastcolumn = col;
// set the table display style to "none" - necessary for netscape 6
// browsers.
var olddsply = tblel.style.display;
tblel.style.display = "none";
// sort the rows based on the content of the specified column using a
// selection sort.
var tmpel;
var i, j;
var minval, minidx;
var testval;
var cmp;
for (i = 0; i < tblel.rows.length - 1; i++) {
// assume the current row has the minimum value.

minidx = i;
minval = gettextvalue(tblel.rows[i].cells[col]);
// search the rows that follow the current one for a smaller value.
for (j = i + 1; j < tblel.rows.length; j++) {
testval = gettextvalue(tblel.rows[j].cells[col]);
cmp = comparevalues(minval, testval);
// negate the comparison result if the reverse sort flag is set.
if (tblel.reversesort[col])
cmp = -cmp;
// sort by the second column (team name) if those values are equal.
if (cmp == 0 && col != 1)
cmp = comparevalues(gettextvalue(tblel.rows[minidx].cells[1]),
gettextvalue(tblel.rows[j].cells[1]));
// if this row has a smaller value than the current minimum, remember its
// position and update the current minimum value.
if (cmp > 0) {
minidx = j;
minval = testval;
}
}
// by now, we have the row with the smallest value. remove it from the
// table and insert it before the current row.
if (minidx > i) {
tmpel = tblel.removechild(tblel.rows[minidx]);
tblel.insertbefore(tmpel, tblel.rows[i]);
}
}
// make it look pretty.

makepretty(tblel, col);
// set team rankings.

setranks(tblel, col, rev);
// restore the table's display style.

tblel.style.display = olddsply;
return false;
}
//-----------------------------------------------------------------------------
// functions to get and compare values during a sort.
//-----------------------------------------------------------------------------
// this code is necessary for browsers that don't reflect the dom constants
// (like ie).
if (document.element_node == null) {
document.element_node = 1;
document.text_node = 3;
}
function gettextvalue(el) {
var i;
var s;
// find and concatenate the values of all text nodes contained within the
// element.
s = "";
for (i = 0; i < el.childnodes.length; i++)
if (el.childnodes[i].nodetype == document.text_node)
s += el.childnodes[i].nodevalue;
else if (el.childnodes[i].nodetype == document.element_node &&
el.childnodes[i].tagname == "br")
s += " ";
else
// use recursion to get text within sub-elements.
s += gettextvalue(el.childnodes[i]);
return normalizestring(s);
}
function comparevalues(v1, v2) {
var f1, f2;
// if the values are numeric, convert them to floats.
f1 = parsefloat(v1);
f2 = parsefloat(v2);
if (!isnan(f1) && !isnan(f2)) {
v1 = f1;
v2 = f2;
}
// compare the two values.

if (v1 == v2)
return 0;
if (v1 > v2)
return 1
return -1;
}
// regular expressions for normalizing white space.

var whtspends = new regexp("^\\s*|\\s*$", "g");
var whtspmult = new regexp("\\s\\s+", "g");
function normalizestring(s) {
s = s.replace(whtspmult, " "); // collapse any multiple whites space.

s = s.replace(whtspends, ""); // remove leading or trailing white space.
return s;
}
//-----------------------------------------------------------------------------
// functions to update the table appearance after a sort.
//-----------------------------------------------------------------------------
// style class names.

var rowclsnm = "alternaterow";
var colclsnm = "sortedcolumn";
// regular expressions for setting class names.

var rowtest = new regexp(rowclsnm, "gi");
var coltest = new regexp(colclsnm, "gi");
function makepretty(tblel, col) {
var i, j;
var rowel, cellel;
// set style classes on each row to alternate their appearance.

for (i = 0; i < tblel.rows.length; i++) {
rowel = tblel.rows[i];
rowel.classname = rowel.classname.replace(rowtest, "");
if (i % 2 != 0)
rowel.classname += " " + rowclsnm;
rowel.classname = normalizestring(rowel.classname);
// set style classes on each column (other than the name column) to
// highlight the one that was sorted.
for (j = 2; j < tblel.rows[i].cells.length; j++) {
cellel = rowel.cells[j];
cellel.classname = cellel.classname.replace(coltest, "");
if (j == col)
cellel.classname += " " + colclsnm;
cellel.classname = normalizestring(cellel.classname);
}
}
// find the table header and highlight the column that was sorted.
var el = tblel.parentnode.thead;
rowel = el.rows[el.rows.length - 1];
// set style classes for each column as above.
for (i = 2; i < rowel.cells.length; i++) {
cellel = rowel.cells[i];
cellel.classname = cellel.classname.replace(coltest, "");
// highlight the header of the sorted column.
if (i == col)
cellel.classname += " " + colclsnm;
cellel.classname = normalizestring(cellel.classname);
}
}
function setranks(tblel, col, rev) {

// determine whether to start at the top row of the table and go down or
// at the bottom row and work up. this is based on the current sort
// direction of the column and its reversed flag.
var i = 0;
var incr = 1;
if (tblel.reversesort[col])
rev = !rev;
if (rev) {
incr = -1;
i = tblel.rows.length - 1;
}
// now go through each row in that direction and assign it a rank by

// counting 1, 2, 3...
var count = 1;
var rank = count;
var curval;
var lastval = null;
// note that this loop is skipped if the table was sorted on the name
// column.
while (col > 1 && i >= 0 && i < tblel.rows.length) {
// get the value of the sort column in this row.

curval = gettextvalue(tblel.rows[i].cells[col]);
// on rows after the first, compare the sort value of this row to the
// previous one. if they differ, update the rank to match the current row
// count. (if they are the same, this row will get the same rank as the
// previous one.)
if (lastval != null && comparevalues(curval, lastval) != 0)
rank = count;
// set the rank for this row.
tblel.rows[i].rank = rank;
// save the sort value of the current row for the next time around and bump
// the row counter and index.
lastval = curval;
count++;
i += incr;
}
// now go through each row (from top to bottom) and display its rank. note
// that when two or more rows are tied, the rank is shown on the first of
// those rows only.
var rowel, cellel;

var lastrank = 0;
// go through the rows from top to bottom.

for (i = 0; i < tblel.rows.length; i++) {
rowel = tblel.rows[i];
cellel = rowel.cells[0];
// delete anything currently in the rank column.
while (cellel.lastchild != null)
cellel.removechild(cellel.lastchild);
// if this row's rank is different from the previous one, insert a new text
// node with that rank.
if (col > 1 && rowel.rank != lastrank) {
cellel.appendchild(document.createtextnode(rowel.rank));
lastrank = rowel.rank;
}
}
}
//]]></script>
</head>
<body>
<div id="demobox">
<h3>table sorting demo</h3>
<p>this page contains two similar tables than can be dynamically sorted in a
number of ways just by clicking on a column header. to reverse the sort order
for a given column, click on it twice in a row.</p>
<p>the table's appearance and some of its content changes with each sort as
well. in addition to style changes, the <i>rank</i> column is updated to match
the sorted column.</p>
<p>use your browser's <code>view source</code> option to see the full source
code.</p>
</div>
<p></p>

<table border="0" cellpadding="0" cellspacing="0">

<thead>
<tr>
<th class="mainheader" colspan="11">nfl 2001 offensive stats</th>
</tr>
<tr>
<th style="text-align:left;">rank</th>
<th style="text-align:left;"><a href="" onclick="this.blur(); return
sorttable('offtblbdy', 1, false);" title="team name">team</a></th>
<th><span title="games played">gms</span></th>
<th><a href="" onclick="this.blur(); return sorttable('offtblbdy', 3,
true);" title="total yards" >yds</a></th>
true);" title="yards per game" >yds/g</a></th>
true);" title="total rushing yards" >ruyds</a></th>
true);" title="rushing yards per game">ruyds/g</a></th>
true);" title="total passing yards" >payds</a></th>
true);" title="passing yards per game">payds/g</a></th>
true);" title="total points scored" >pts</a></th>
true);" title="points per game" >pts/g</a></th>
</tr>
</thead>
<tbody id="offtblbdy">
<tr>
<td class="numeric"></td>
<td>arizona</td>
<td class="numeric">16</td>
<td class="numeric">306.1</td>
</tr>
<tr class="alternaterow">
<td>atlanta</td>
</tr>
<tr>
<td>baltimore</td>
</tr>
<td>buffalo</td>
</tr>
<tr>
<td>carolina</td>
</tr>
<td>chicago</td>
</tr>
<tr>
<td>cincinnati</td>
</tr>
<td>cleveland</td>
</tr>
<tr>
<td>dallas</td>
</tr>
<td>denver</td>
</tr>
<tr>
<td>detroit</td>
</tr>
<td>green bay</td>
</tr>
<tr>
<td>indianapolis</td>
</tr>
<td>jacksonville</td>
</tr>
<tr>
<td>kansas city</td>
</tr>
<td>miami</td>
</tr>
<tr>
<td>minnesota</td>
</tr>
<td>new england</td>
</tr>
<tr>
<td>new orleans</td>
</tr>
<td>new york giants</td>
</tr>
<tr>
<td>new york jets</td>
</tr>
<td>oakland</td>
</tr>
<tr>
<td>philadelphia</td>
</tr>
<td>pittsburgh</td>
</tr>
<tr>
<td>saint louis</td>
</tr>
<td>san diego</td>
</tr>
<tr>
<td>san francisco</td>
</tr>
<td>seattle</td>
</tr>
<tr>
<td>tampa bay</td>
</tr>
<td>tennessee</td>
</tr>
<tr>
<td>washington</td>
</tr>
</tbody>
</table>
<p></p>

<table border="0" cellpadding="0" cellspacing="0">

<thead>
<tr>
<th class="mainheader" colspan="11">nfl 2001 defensive stats</th>
</tr>
<tr>
<th style="text-align:left;">rank</th>
<th style="text-align:left;"><a href="" onclick="this.blur(); return
sorttable('deftblbdy', 1, false);" title="team name">team</a></th>
<th><span title="games played">gms</span></th>
<th><a href="" onclick="this.blur(); return sorttable('deftblbdy', 3,
false);" title="total yards allowed" >yds</a></th>
false);" title="yards allowed per game" >yds/g</a></th>
false);" title="total rushing yards allowed" >ruyds</a></th>
false);" title="rushing yards allowed per game">ruyds/g</a></th>
false);" title="total passing yards allowed" >payds</a></th>
false);" title="passing yards allowed per game">payds/g</a></th>
false);" title="total points allowed" >pts</a></th>
false);" title="points allowed per game" >pts/g</a></th>
</tr>
</thead>
<tbody id="deftblbdy">
<tr>
<td>arizona</td>
</tr>
<td>atlanta</td>
</tr>
<tr>
<td>baltimore</td>
</tr>
<td>buffalo</td>
</tr>
<tr>
<td>carolina</td>
</tr>
<td>chicago</td>
</tr>
<tr>
<td>cincinnati</td>
</tr>
<td>cleveland</td>
</tr>
<tr>
<td>dallas</td>
</tr>
<td>denver</td>
</tr>
<tr>
<td>detroit</td>
</tr>
<td>green bay</td>
</tr>
<tr>
<td>indianapolis</td>
</tr>
<td>jacksonville</td>
</tr>
<tr>
<td>kansas city</td>
</tr>
<td>miami</td>
</tr>
<tr>
<td>minnesota</td>
</tr>
<td>new england</td>
</tr>
<tr>
<td>new orleans</td>
</tr>
<td>new york giants</td>
</tr>
<tr>
<td>new york jets</td>
</tr>
<td>oakland</td>
</tr>
<tr>
<td>philadelphia</td>
</tr>
<td>pittsburgh</td>
</tr>
<tr>
<td>saint louis</td>
</tr>
<td>san diego</td>
</tr>
<tr>
<td>san francisco</td>
</tr>
<td>seattle</td>
</tr>
<tr>
<td>tampa bay</td>
</tr>
<td>tennessee</td>
</tr>
<tr>
<td>washington</td>
</tr>
</tbody>
</table>
</body>
</html>

Alternate Way - Sorting Table Scripts

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Alternate Way - Sorting Table Scripts

Încărcat de

Drepturi de autor:

Formate disponibile

<!doctype html public "-//w3c//dtd xhtml 1.

function sorttable(id, col, rev) {

// get the table or table section to sort.

// remember this column as the last one sorted.

for (i = 0; i < tblel.rows.length - 1; i++) {

// assume the current row has the minimum value.

// make it look pretty.

// set team rankings.

// restore the table's display style.

function comparevalues(v1, v2) {

var f1, f2;

// if the values are numeric, convert them to floats.

// compare the two values.

// regular expressions for normalizing white space.

s = s.replace(whtspmult, " "); // collapse any multiple whites space.

// style class names.

// regular expressions for setting class names.

function makepretty(tblel, col) {

// set style classes on each row to alternate their appearance.

function setranks(tblel, col, rev) {

// now go through each row in that direction and assign it a rank by

// get the value of the sort column in this row.

var rowel, cellel;

// go through the rows from top to bottom.

<h3>table sorting demo</h3>

<table border="0" cellpadding="0" cellspacing="0">

<table border="0" cellpadding="0" cellspacing="0">

S-ar putea să vă placă și