Simplest and best column sorting in HTML table?
in [JavaScript]
|
Prev: SlickSpeed: jquery vs mylib
Next: FAQ Topic - How do I format a Date object with javascript? (2010-01-27)
From: Matt Kruse on 27 Jan 2010 09:28 On Jan 27, 1:44 am, RobG <rg...(a)iinet.net.au> wrote: > >http://JavascriptToolbox.com/lib/table/ > 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
From: dorayme on 27 Jan 2010 16:48 In article <doraymeRidThis-D68949.08194927012010(a)news.albasani.net>, dorayme <doraymeRidThis(a)optusnet.com.au> wrote: > 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? -- dorayme
From: Gregor Kofler on 27 Jan 2010 19:36 dorayme meinte: > In article > <doraymeRidThis-D68949.08194927012010(a)news.albasani.net>, > dorayme <doraymeRidThis(a)optusnet.com.au> wrote: > >> 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? 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[i].className = classNames[i % classNames.length]; } Gregor -- http://www.gregorkofler.com
From: Evertjan. on 28 Jan 2010 05:32 dorayme wrote on 27 jan 2010 in comp.lang.javascript: > <http://dorayme.netweaver.com.au/tableSort/tableSortCandidate.html 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[i].cells[sortCol].innerHTML; for (j=0;j<lenCol;j++) r[i-1] += splitter + tRows[i].cells[j].innerHTML; }; r.sort(); for (i=0;i<lenRow-1;i++) { y = r[i].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> ========================================= -- Evertjan. The Netherlands. (Please change the x'es to dots in my emailaddress)
From: Gregor Kofler on 28 Jan 2010 06:49
Evertjan. meinte: > dorayme wrote on 27 jan 2010 in comp.lang.javascript: >> <http://dorayme.netweaver.com.au/tableSort/tableSortCandidate.html > > 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 -- http://www.gregorkofler.com |