is there a way to speed up this tablesort code?

[loc2006]

I got this tablesort code from
http://www.brainjar.com/dhtml/tablesort/default7.asp

This is very slow for my table of 10 columns and 400 rows. Is there a
way to optimize this code make it screaming fast?

function sortTable(id, col, rev) {

// Get the table or table section to sort.
var tblEl = document.getEle mentById(id);

// The first time this function is called for a given table, set up
an
// array of reverse sort flags.
if (tblEl.reverseS ort == null) {
tblEl.reverseSo rt = new Array();
// Also, assume the team name column is initially sorted.
tblEl.lastColum n = 1;
}

// If this column has not been sorted before, set the initial sort
direction.
if (tblEl.reverseS ort[col] == null)
tblEl.reverseSo rt[col] = rev;

// If this column was the last one sorted, reverse its sort
direction.
if (col == tblEl.lastColum n)
tblEl.reverseSo rt[col] = !tblEl.reverseS ort[col];

// Remember this column as the last one sorted.
tblEl.lastColum n = col;

// Set the table display style to "none" - necessary for Netscape 6
// browsers.
var oldDsply = tblEl.style.dis play;
tblEl.style.dis play = "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.leng th - 1; i++) {

// Assume the current row has the minimum value.
minIdx = i;
minVal = getTextValue(tb lEl.rows[i].cells[col]);

// Search the rows that follow the current one for a smaller value.
for (j = i + 1; j < tblEl.rows.leng th; j++) {
testVal = getTextValue(tb lEl.rows[j].cells[col]);
cmp = compareValues(m inVal, testVal);
// Negate the comparison result if the reverse sort flag is set.
if (tblEl.reverseS ort[col])
cmp = -cmp;
// Sort by the second column (team name) if those values are
equal.
if (cmp == 0 && col != 1)
cmp = compareValues(g etTextValue(tbl El.rows[minIdx].cells[1]),
getTextValue(tb lEl.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.removeChi ld(tblEl.rows[minIdx]);
tblEl.insertBef ore(tmpEl, tblEl.rows[i]);
}
}

// Make it look pretty.
makePretty(tblE l, col);

// Set team rankings.
//setRanks(tblEl, col, rev);

// Restore the table's display style.
tblEl.style.dis play = oldDsply;

return false;
}

function makePretty(tblE l, col) {

var i, j;
var rowEl, cellEl;

// Set style classes on each row to alternate their appearance.
for (i = 0; i < tblEl.rows.leng th; i++) {
rowEl = tblEl.rows[i];
rowEl.className = rowEl.className .replace(rowTes t, "");
if (i % 2 != 0)
rowEl.className += " " + rowClsNm;
rowEl.className = normalizeString (rowEl.classNam e);
// Set style classes on each column (other than the name column) to
// highlight the one that was sorted.
for (j = 1; j < tblEl.rows[i].cells.length; j++) {
cellEl = rowEl.cells[j];
cellEl.classNam e = cellEl.classNam e.replace(colTe st, "");
if (j == col)
cellEl.classNam e += " " + colClsNm;
cellEl.classNam e = normalizeString (cellEl.classNa me);
}
}

// Find the table header and highlight the column that was sorted.
var el = tblEl.parentNod e.tHead;
rowEl = el.rows[el.rows.length - 1];
// Set style classes for each column as above.
for (i = 1; i < rowEl.cells.len gth; i++) {
cellEl = rowEl.cells[i];
cellEl.classNam e = cellEl.classNam e.replace(colTe st, "");
// Highlight the header of the sorted column.
if (i == col)
cellEl.classNam e += " " + colClsNm;
cellEl.classNam e = normalizeString (cellEl.classNa me);
}
}

[Thomas 'PointedEars' Lahn]

lo*****@gmail.c om wrote:

I got this tablesort code from
http://www.brainjar.com/dhtml/tablesort/default7.asp

This is very slow for my table of 10 columns and 400 rows. Is there a
way to optimize this code make it screaming fast?

function sortTable(id, col, rev) {
// Get the table or table section to sort.
var tblEl = document.getEle mentById(id);

// The first time this function is called for a given table, set up
// an array of reverse sort flags.
if (tblEl.reverseS ort == null) {
tblEl.reverseSo rt = new Array();
// Also, assume the team name column is initially sorted.
tblEl.lastColum n = 1;
}
It is error-prone to add new properties to host objects like
HTMLTableElemen t objects.
// Sort the rows based on the content of the specified column using a
// selection sort.
Selection sort is probably the most intuitive sort algorithmbut not a very
efficient one; it has a time complexity of O(n^2) in the best case, average
case and worst case. Try something faster like Quicksort; it has a time
complexity of O(n*log(n)) in the best case and the average case, and O(n^2)
only in the worst case.

<URL:http://en.wikipedia.or g/wiki/Sorting_algorit hm>

Maybe it is even faster to store the rows into an array, sort that
array by criteria using Array.prototype .sort(), and reorder the actual
HTMLTableRowEle ment objects in the comparator or rebuild the table
afterwards according to the array.
[...]
for (i = 0; i < tblEl.rows.leng th - 1; i++) {
Replace with

for (var i = 0, len = tblEl.rows.leng th - 1; i < len; i--)
{ [...]
for (j = i + 1; j < tblEl.rows.leng th; j++) {
Replace with

for (var j = i + 1, len2 = tblEl.rows.leng th; j < len; j++)
{

But you should instead use the `tbody' element to distinguish between table
rows in the table header and the table body. HTMLTableSectio nElement
objects have a `rows' property, too.

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573>
// 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.removeChi ld(tblEl.rows[minIdx]);
tblEl.insertBef ore(tmpEl, tblEl.rows[i]);
}
}
You do not need to remove the element from the DOM tree yourself before
you insert it again. If the first parameter of Node::insertBef ore
refers to a node that is already in the DOM tree, it is first removed:

<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-952280727>
[...]
function makePretty(tblE l, col) {
[...]
if (i % 2 != 0)
Use (i & 1) to test for an odd number i instead, it is probably faster.
rowEl.className += " " + rowClsNm;
rowEl.className = normalizeString (rowEl.classNam e);
// Set style classes on each column (other than the name column) to
// highlight the one that was sorted.
for (j = 1; j < tblEl.rows[i].cells.length; j++) {
See above.
[...]
// Set style classes for each column as above.
for (i = 1; i < rowEl.cells.len gth; i++) {
See above.
[...]

And probably I forgot to mention something.
HTH

PointedEars

[Thomas 'PointedEars' Lahn]

lo*****@gmail.c om wrote:

I got this tablesort code from
http://www.brainjar.com/dhtml/tablesort/default7.asp

This is very slow for my table of 10 columns and 400 rows. Is there a
way to optimize this code make it screaming fast?

function sortTable(id, col, rev) {
// Get the table or table section to sort.
var tblEl = document.getEle mentById(id);

// The first time this function is called for a given table, set up
// an array of reverse sort flags.
if (tblEl.reverseS ort == null) {
tblEl.reverseSo rt = new Array();
// Also, assume the team name column is initially sorted.
tblEl.lastColum n = 1;
}
It is error-prone to add new properties to host objects like
HTMLTableElemen t objects.
// Sort the rows based on the content of the specified column using a
// selection sort.
Selection sort is probably the most intuitive sorting algorithm, but not a
very efficient one; it has a time complexity of O(n^2) in the best case,
average case and worst case. Try something faster like Quicksort; it has a
time complexity of O(n*log(n)) in the best case and the average case, and
O(n^2) only in the worst case.

<URL:http://en.wikipedia.or g/wiki/Sorting_algorit hm>

Maybe it is even faster to store the rows into an array, sort that
array by criteria using Array.prototype .sort(), and reorder the actual
HTMLTableRowEle ment objects in the comparator or rebuild the table
afterwards according to the array.
[...]
for (i = 0; i < tblEl.rows.leng th - 1; i++) {
Replace with

for (var i = 0, len = tblEl.rows.leng th - 1; i < len; i--)
{ [...]
for (j = i + 1; j < tblEl.rows.leng th; j++) {
Replace with

for (var j = i + 1, len2 = tblEl.rows.leng th; j < len; j++)
{

But you should instead use the `tbody' element to distinguish between table
rows in the table header and the table body. HTMLTableSectio nElement
objects have a `rows' property, too.

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573>
// 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.removeChi ld(tblEl.rows[minIdx]);
tblEl.insertBef ore(tmpEl, tblEl.rows[i]);
}
}
You do not need to remove the element from the DOM tree yourself before
you insert it again. If the first parameter of Node::insertBef ore
refers to a node that is already in the DOM tree, it is first removed:

<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-952280727>
[...]
function makePretty(tblE l, col) {
[...]
if (i % 2 != 0)
Use (i & 1) to test for an odd number i instead, it is probably faster.
rowEl.className += " " + rowClsNm;
rowEl.className = normalizeString (rowEl.classNam e);
// Set style classes on each column (other than the name column) to
// highlight the one that was sorted.
for (j = 1; j < tblEl.rows[i].cells.length; j++) {
See above.
[...]
// Set style classes for each column as above.
for (i = 1; i < rowEl.cells.len gth; i++) {
See above.
[...]

And probably I forgot to mention something.
HTH

PointedEars

[bwucke]

lo*****@gmail.c om napisal(a):

I got this tablesort code from
http://www.brainjar.com/dhtml/tablesort/default7.asp

This is very slow for my table of 10 columns and 400 rows. Is there a
way to optimize this code make it screaming fast?

Move it to server side, do the sorting in the database app, send out
ready HTML.
Seriously, you can speed up the sorting algorithm as much as you want,
but juggling 400 elements using DOM functions WILL be slow no matter
what.
I bet using CSS, relative positioning and just changing Y-positions of
existing table rows would be much faster, but I'm scared of my own idea.

[Jasen Betts]

On 2006-01-03, Thomas 'PointedEars' Lahn <Po*********@we b.de> wrote:

It is error-prone to add new properties to host objects like
HTMLTableElemen t objects.

// Sort the rows based on the content of the specified column using a
// selection sort.
Selection sort is probably the most intuitive sorting algorithm,

yeah!.
Maybe it is even faster to store the rows into an array, sort that
array by criteria using Array.prototype .sort()
aren't they already an array?

for (j = i + 1; j < tblEl.rows.leng th; j++) {

Replace with

for (var j = i + 1, len2 = tblEl.rows.leng th; j < len; j++)
{

/\
that won't work, (should be len2) / \

if (minIdx > i) {
tmpEl = tblEl.removeChi ld(tblEl.rows[minIdx]);
tblEl.insertBef ore(tmpEl, tblEl.rows[i]);
}
}

You do not need to remove the element from the DOM tree yourself before
you insert it again. If the first parameter of Node::insertBef ore
refers to a node that is already in the DOM tree, it is first removed:

infact why not use appendchild ? and do without the temporary element
<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-952280727>

[...]
function makePretty(tblE l, col) {
[...]
if (i % 2 != 0)

Use (i & 1) to test for an odd number i instead, it is probably faster.

probably not noticably faster.

Bye.
Jasen

[Jonas Raoni]

bw****@gmail.co m escreveu:

lo*****@gmail.c om napisal(a):

This is very slow for my table of 10 columns and 400 rows. Is there a
way to optimize this code make it screaming fast?

Move it to server side, do the sorting in the database app, send out
ready HTML.

For paged data, sorting by JS will have a really strange result... But
if you don't have a huge amount of records, I think you should use it,
it's better than waiting for a server answer :)

Give a try to my friend's code, it's working reasonably fast...

You can see the code [http://jsfromhell.com/js/TableSort.js] working in
the lists [http://jsfromhell.com/dhtml], the useful part for you is the
"sortCol" function =]

This is just the sorting initialization:
[http://jsfromhell.com/js/sortCode.js]
--
Jonas Raoni Soares Silva
http://www.jsfromhell.com