Simplest and best column sorting in HTML table?

D

dorayme

What is best js to provide for client side column sorting with
html tables? Be nice to have the cursor change to a hand on
hovering the table headings. Thank you.
 
S

Scott Sauyet

What is best js to provide for client side column sorting with
html tables? Be nice to have the cursor change to a hand on
hovering the table headings. Thank you.

This is probably too large a topic to get very useful results. Have
you searched the web for implementations? People here can probably
comment on the usability, efficiency, and quality of various table
sorters to be found online. But perhaps you can narrow down the list
to examined first...

-- Scott
 
G

Gregor Kofler

dorayme meinte:
What is best js to provide for client side column sorting with
html tables? Be nice to have the cursor change to a hand on
hovering the table headings. Thank you.

What do you mean by "best"? (And what is "simplest")?

Ive done my own one[1]. The sorting itself is done with JS "native"
Array.sort() method (which I suppose uses the quicksort algorithm).

Once sorted, the table rows are exchanged accordingly. It's all
relatively simple (and the script a mere 4k). My sortable table was
somewhat faster than two or three alternatives I checked out. Rebuilding
the table object with the neccessary reflow eat up most of the time.

Cursor appearance can be done with CSS. Most of the alternatives out
there provide more options, but are too bloated for my liking and/or
rely on one of those "general purpose" libraries.

Gregor


[1]
http://vxjs.gregorkofler.com/?page=sortable
 
M

Matt Kruse

What is best js to provide for client side column sorting with
html tables? Be nice to have the cursor change to a hand on
hovering the table headings. Thank you.

Check out mine:

http://JavascriptToolbox.com/lib/table/

It does sorting, striping, filtering, and paging in lib.

It's flexible, extensible, and extremely fast. In tests I did at the
time of writing, I couldn't find any table-sorting solution that was
faster. Especially in browsers like IE6, where some unconventional
internal optimizations make a big difference.

It also does things like correctly handling colspans in headers,
respecting footers & separate tbody's, allowing some tbody's to be
left unsorted, letting you define your own data type for columns, etc.

If you have any feedback, I would love to hear it!

Matt Kruse
 
D

dorayme

<[email protected]
m>,
Scott Sauyet said:
This is probably too large a topic to get very useful results. Have
you searched the web for implementations? People here can probably
comment on the usability, efficiency, and quality of various table
sorters to be found online. But perhaps you can narrow down the list
to examined first...

I would be most happy to hear someone say, for example, about:

<http://dorayme.netweaver.com.au/tableSortCandidate.html>

"This is what I have done with similar and I offer it to you in
hope it helps..."

The "..." would be things like:

Add a thead and tbody...

Class the table element to "sortable"

Link to "sorttable.js" to be found at:

<http://www.kryogenix.org/code/browser/sorttable/>

As for the cursor changing to a hand, this is what I have found
works best...

I kindly give you all the opportunity to rain down pearls of
specific wisdom on me based on actual practice. My offer will not
last forever, you know. <g>
 
D

dorayme

<[email protected]
m>,
Matt Kruse said:
Check out mine:

http://JavascriptToolbox.com/lib/table/

It does sorting, striping, filtering, and paging in lib.

It's flexible, extensible, and extremely fast. In tests I did at the
time of writing, I couldn't find any table-sorting solution that was
faster. Especially in browsers like IE6, where some unconventional
internal optimizations make a big difference.

It also does things like correctly handling colspans in headers,
respecting footers & separate tbody's, allowing some tbody's to be
left unsorted, letting you define your own data type for columns, etc.

If you have any feedback, I would love to hear it!

It looks very good indeed and thanks very much. It does more than
I actually want but it has the features I want. I will study the
documentation and have a go.
 
D

dorayme

Gregor Kofler said:
dorayme meinte:

What do you mean by "best"? (And what is "simplest")?

To explain this would mean explaining about me too much. I don't
want to get too personal at the moment!

Ive done my own one[1]. The sorting itself is done with JS "native"
Array.sort() method (which I suppose uses the quicksort algorithm).

Once sorted, the table rows are exchanged accordingly. It's all
relatively simple (and the script a mere 4k). My sortable table was
somewhat faster than two or three alternatives I checked out. Rebuilding
the table object with the neccessary reflow eat up most of the time.

Cursor appearance can be done with CSS. Most of the alternatives out
there provide more options, but are too bloated for my liking and/or
rely on one of those "general purpose" libraries.

Gregor


[1]
http://vxjs.gregorkofler.com/?page=sortable

Thanks Gregor, I will study this. My needs are dead simple. Just
to sort the likes of:

<http://dorayme.netweaver.com.au/tableSortCandidate.html>

and have the hand cursor (easy enough for me to work out).
 
L

Lasse Reichstein Nielsen

Gregor Kofler said:
The sorting itself is done with JS "native"
Array.sort() method (which I suppose uses the quicksort algorithm).

That differs between browsers/JavaScript implementations.

From the open source browsers:

http://trac.webkit.org/browser/trunk/JavaScriptCore/runtime/ArrayPrototype.cpp
(the function arrayProtoFuncSort, "min"-sort - a fairly simple algorithm with
a guaranteed quadratic number of comparisons, but low overhead.)

http://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/array.js
(the function ArraySort, quicksort with insertion-sort as base for recursion)

http://mxr.mozilla.org/seamonkey/source/js/src/jsarray.c
(the function js_MergeSort, merge-sort-based, if you trust the name :)

/L
 
G

Gregor Kofler

Lasse Reichstein Nielsen meinte:
That differs between browsers/JavaScript implementations.

Interesting. I had then replaced the built-in sort with my "own"
quicksort function and it was only slighlty slower. Since the sorting
itself wasn't an issue when compared to the "speed" of the required DOM
operations, I didn't investigate any further and stuck to the built-in
algorithm (according to the various Wikipedia articles quicksort,
mergesort and minsort don't differ too much in terms of speed).

Gregor
 
M

Matt Kruse

The supported date formats do not seem to include the one that is
probably most commonly used - d/m/yyyy.

Easily added, if you just define another sort type or extend the date
one with a new parser. Since dates like 1/2/2010 can be interpreted
either way with different results, adding a d/m/yyyy parser after the
m/d/yyyy parser may lead to confusion. Besides, m/d/y is most
commonly used in the US, where I am located, so it gets priority ;)

Matt Kruse
 
D

dorayme

dorayme said:
What is best js to provide for client side column sorting with
html tables? Be nice to have the cursor change to a hand on
hovering the table headings. Thank you.

I have this so far (being easiest for me to implement for the
moment):

<http://dorayme.netweaver.com.au/tableSort/tableSortCandidate.html
But it looks like there is trouble between the striping js and
the sorting js. Sorting the towns is fine, the striping
alternates well. But with the postcodes, the *alternate* striping
effect breaks down somewhat.

Any suggestions on how to fix this in a simple way please?
 
G

Gregor Kofler

dorayme meinte:
I have this so far (being easiest for me to implement for the
moment):

<http://dorayme.netweaver.com.au/tableSort/tableSortCandidate.html

But it looks like there is trouble between the striping js and
the sorting js. Sorting the towns is fine, the striping
alternates well. But with the postcodes, the *alternate* striping
effect breaks down somewhat.

Any suggestions on how to fix this in a simple way please?

You have to re-color the tabel rows. When sorting by town coincidentally
the striping remains in the right order, not so when sorting via
postcode. You need a brief JS loop that iterates through the table rows
and resets the the table row className.

Something like:

var classNames = ["row0", "row1"], r = yourTable.rows, i;
for(i = 0, l = r.length; i < l; ++i) {
r.className = classNames[i % classNames.length];
}

Gregor
 
E

Evertjan.

dorayme wrote on 27 jan 2010 in comp.lang.javascript:

While I hate "simplest and best" Q,
column sorting can be done much simpler,
with only a few lines of javascript script:

[Chrome and IE8 tested]

=========================================
<script type='text/javascript'>

function sorter(x,sortCol) {

var i,j,y,r = [],splitter = '/*/*/*/';
var tRows = x.parentNode.parentNode.parentNode.rows;
var lenRow = tRows.length;
var lenCol = tRows[1].cells.length;

for (j=0;j<lenCol;j++)
tRows[0].cells[j].style.color = '';
x.style.color = 'red';

for (i=1;i<lenRow;i++) {
r[i-1] = tRows.cells[sortCol].innerHTML;
for (j=0;j<lenCol;j++)
r[i-1] += splitter + tRows.cells[j].innerHTML;
};

r.sort();

for (i=0;i<lenRow-1;i++) {
y = r.split(splitter);
for (j=0;j<lenCol;j++)
tRows[i+1].cells[j].innerHTML = y[j+1];
};
};

</script>


<table border=1>
<tr>
<th onclick='sorter(this,0)' style='cursor:pointer;'>Town</th>
<th onclick='sorter(this,1)' style='cursor:pointer;'>Postcode</th>
<th>Address</th>
<th onclick='sorter(this,3)' style='cursor:pointer;'>Phone</th>
</tr>
<tr>
<td>Abcdef</td>
<td>2041</td>
<td>9 The Avenue</td>
<td>02 5198 2497</td>
</tr>
<tr>
<td>Bcdefg</td>
<td>2091</td>
<td>4 Belmore Rd</td>
<td>03 4198 2497</td>
</tr>
<tr>
<td>Cdefgh</td>
<td>3041</td>
<td>9 Avenue St</td>
<td>08 5198 2597</td>
</tr>
<tr>
<td>Defghi</td>
<td>5041</td>
<td>3 Stirling St</td>
<td>07 5198 2597</td>
</tr>
<tr>
<td>Efghij</td>
<td>4310</td>
<td>1 Beach St</td>
<td>07 5128 2597</td>
</tr>
</table>
=========================================
 
G

Gregor Kofler

Evertjan. meinte:
dorayme wrote on 27 jan 2010 in comp.lang.javascript:

While I hate "simplest and best" Q,
column sorting can be done much simpler,
with only a few lines of javascript script:

[Chrome and IE8 tested]

=========================================
[snip]

Indeed - and it might be sufficient for dorayme's case. But your
solution won't work with (non-iso) dates, (formatted) numbers, etc.

Besides, since you swap the contents of the cells and not the cell
elements itself you will lose attached event listeners. And I suppose
since every innerHTML assignment for every cell triggers a reflow this
could be rather slow.

Gregor
 
E

Evertjan.

Gregor Kofler wrote on 28 jan 2010 in comp.lang.javascript:
Evertjan. meinte:
dorayme wrote on 27 jan 2010 in comp.lang.javascript:

While I hate "simplest and best" Q,
column sorting can be done much simpler,
with only a few lines of javascript script:

[Chrome and IE8 tested]

=========================================
[snip]

Indeed - and it might be sufficient for dorayme's case. But your
solution won't work with (non-iso) dates, (formatted) numbers, etc.

That can be said for any solution, that certain requiremwents are not met
and need to be added IF required,
but the OQ was "Simplest and best column sorting in HTML table",
so I don't see why all those components need to be added in a heavy library
scriptfile.
Besides, since you swap the contents of the cells and not the cell
elements itself you will lose attached event listeners.

"Simplest and best column sorting in HTML table"?
And I suppose
since every innerHTML assignment for every cell triggers a reflow this
could be rather slow.

In my example it is flashingly fast, and you do not have to upload a large
js file.

Remember? "Simplest and best column sorting in HTML table"
 
G

Gregor Kofler

Evertjan. meinte:
Gregor Kofler wrote on 28 jan 2010 in comp.lang.javascript:

That can be said for any solution, that certain requiremwents are not met
and need to be added IF required,
but the OQ was "Simplest and best column sorting in HTML table",

Simple - yes. Primitive? Maybe not. Sorting is only supported in one
direction; and *only* sorting for strings is most of the time useless
(dorayme's postcodes could become a problem).
so I don't see why all those components need to be added in a heavy library
scriptfile.

Er... my script is a mere 4k including a few comments. If you copy the
needed functions from the core library you'd end up with maybe 6k or 7k.
It's definitely longer than yours but "heavy"? This is the (ugly) era of
GP libraries like YUI and Ext JS...
"Simplest and best column sorting in HTML table"?


In my example it is flashingly fast, and you do not have to upload a large
js file.

Flashingly fast? Are you sure?

I've tried your solution on a larger table (200 rows, columns Name1 and
City):
http://vxjs.gregorkofler.com/?page=sortable

FF 3.5@Ubuntu 9.10 gives me on average 1,150ms with your solution and
290ms with mine (even with the overhead of "fancy" sorting).

Chromium 5.0@Ubuntu 9.10 *is* blazingly fast: 90ms for your solution -
25ms for mine.

Opera 10 45ms vs. 190ms.

Speed won't be an issue in the latter case, but with FF I it's either
"slow" or "unbearably sluggish". With 5 rows you won't notice a
difference. But then: Why should one want to sort 5 rows?

Gregor
 
D

dorayme

Evertjan. said:
dorayme wrote on 27 jan 2010 in comp.lang.javascript:

While I hate "simplest and best" Q,
column sorting can be done much simpler,
with only a few lines of javascript script:

[Chrome and IE8 tested]

=========================================
<script type='text/javascript'>

function sorter(x,sortCol) {

var i,j,y,r = []

Good effort Evertjan, for a secret yogurt recipe of mine, or one
of the best jokes in the world, interested in extending it to a
combined stable script that *stripes* the rows and sorts just the
towns or postcodes, *nothing else*, better and simpler than:

http://dorayme.netweaver.com.au/tableSort/tableSortCandidate.html

?
 
M

Michael Wojcik

Gregor said:
Interesting. I had then replaced the built-in sort with my "own"
quicksort function and it was only slighlty slower. Since the sorting
itself wasn't an issue when compared to the "speed" of the required DOM
operations, I didn't investigate any further and stuck to the built-in
algorithm (according to the various Wikipedia articles quicksort,
mergesort and minsort don't differ too much in terms of speed).

For the amount of data you're likely to be sorting in an ECMAScript
program, implementation will probably matter far more than algorithm.
Quicksort and Mergesort are both generally described as O(n lg n)
algorithms[1], while the "min sort" (basically just a Selection Sort)
is, as Lasse said, O(n**2). This is all with complexity measured as
average number of comparisons in non-pathological cases.

But the average number of comparisons is obviously only part of the story.

A naive Quicksort, for example, degrades to O(n**2) if the input is
already sorted. There are strategies to avoid this (eg median-of-three
in pivot selection, or Introsort's detect-and-dodge approach), but
they mean additional code complexity. And Quicksort is defined
recursively, but for optimal performance on datasets of significant
size it's usually much better to implement it iteratively - again,
complicating the code, and leading to more work in the inner loop,
possible cache misses, etc.

Mergesort is straightforward, but it tends to have lousy locality of
reference once the large merges start. It's handy for sorts that have
to spill to disk (or slower media), but often not ideal for in-memory
sorting. And again, the obvious recursive implementation, though
elegant in source, will likely lose to an iterative one.

Then there are all the usual optimization concerns: memory
consumption, hoisting code out of the inner loop, and so forth.
(Looking at the implementation of "min sort" in WebKit that Lasse
linked to, I can't help but wonder if it wouldn't be better to do more
preprocessing and get rid of some of those tests in the inner loop.
Yikes.)

And for sorts that are actually implemented in ES, a lot will depend
on how the underlying interpreter works. Interpreting tokenized code
at runtime, for example, is relatively expensive because it ends up
doing indirection through some sort of lookup table. That makes the
path length of the sort's inner loop important for ES engines that are
true interpreters. On the other hand, an ES engine that does JIT
compilation would not be sensitive to this effect, and if the
inner-loop code fit in a CPU cache slot, additional complexity could
very well pay off.


[1] We can leave out the well-known complaints about casual abuse of
complexity notation, etc.
 
E

Evertjan.

Gregor Kofler wrote on 28 jan 2010 in comp.lang.javascript:
Evertjan. meinte:

Simple - yes. Primitive? Maybe not. Sorting is only supported in one
direction; and *only* sorting for strings is most of the time useless
(dorayme's postcodes could become a problem).

What nonsense, as I said my example is extreamely exteneble.

Er... my script is a mere 4k including a few comments. If you copy the
needed functions from the core library you'd end up with maybe 6k or
7k. It's definitely longer than yours but "heavy"? This is the (ugly)
era of GP libraries like YUI and Ext JS...

"core library", terrible idea!

Flashingly fast? Are you sure?

I've tried your solution on a larger table (200 rows, columns Name1
and City):
http://vxjs.gregorkofler.com/?page=sortable

Tables of "200 rows"?

Those things should not be on a HTML page.

Lasrge datacollections should be searched by search strings and prepared
by serverside code and not scrolled foer visual search clientsidde.
FF 3.5@Ubuntu 9.10 gives me on average 1,150ms with your solution and
290ms with mine (even with the overhead of "fancy" sorting).

Chromium 5.0@Ubuntu 9.10 *is* blazingly fast: 90ms for your solution -
25ms for mine.

Opera 10 45ms vs. 190ms.

So what differense would that make on a talbe of max 20 rows, more is not
accepable anyway.
Speed won't be an issue in the latter case, but with FF I it's either
"slow" or "unbearably sluggish". With 5 rows you won't notice a
difference. But then: Why should one want to sort 5 rows?

You are just trying to confuse the issue. See above and ask the OP what
he wants.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top