If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Sorting tables by date or number

The following enables sorting of table columns by date or number by (optionally) clicking on the table headers. There is an amount of code to include but it boils down to the following (after the page has loaded):

AddSortToTables() optionally adds the ability to sort in ascending and descending order by clicking the table headers, for any tables with class "sortIt".

'todos' is the id for the table in my example, and the number 1 refers to the 2nd table-column. Sorting by number ignores pound/dollar signs, commas, extra text, to sort by the raw number that remains (it doesn't change the table-content!).

To sort correctly by date you need to specify the column number (2 is the 3rd column) and the date-format that is used within this column. The date format can include slashes, commas, and can ignore extraneous text. 'mm' signifies that the month will use a leading zero, and similarly for 'dd'.

For both AddSortByNumber and AddSortByDate you can supply an array of column numbers, rather than a single column number.

The JS code includes definitions for $() and AddEvent(). You could remove $() if you've already attached jQuery, and replace AddEvent() if you already have your own version of this function that equalises addEventListener and attachEvent. Added: Actually, you can't just borrow $() from jQuery as the code stands currently - so this whole sequence is designed to work without jQuery.

The code is more detailed than it might need to be as it includes the ability to sort other elements. For example, a DIV containing P-paragraphs, containing dates in SPAN elements:

Code:

AddSortByDate2('div_id', 'p', 'span', 2, 'dd/mm/yy');
// then use, perhaps, a button:
<button onclick="SortElements('div_id','p','span',2);">Sort by date.</button>
// or use AddEvent to attach the event in JS.

Last edited by AndrewGSW; 09-16-2012 at 08:07 PM.

"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS

It occurs to me that if I have a carousel made of an ol with li's containing an image, title, amount and, perhaps, a date in separate spans, then, using my code, I could sort the carousel at the touch of a button

Sorting elements

I thought I would pursue the idea I raised in a previous post:
the following code allows me to sort a gallery according to an amount or date. It should/will work even if the gallery is within a carousel, a table row, or even a sequence of floated elements - see screenshots (the first is sorted by amount, the second by date, ascending or descending).

My last post here (I promise ) - I've combined the previous post's example with my Event Delegation method discussed in another thread, so that I can click on the amounts or dates within the gallery to perform the (ascending or descending) sort.

If anyone has experience of benchmarking/profiling I would appreciate some assistance obtaining timings for my table sorting please. I think my console.log for milliseconds is incorrect in the attached file (I grabbed the expressions from the internet).

I have 171ms to sort 1000 rows by a date column in Google Chrome using: console.time("test");