[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Sorting Table Rows By Dates in Javascript

Posted on 2012-09-13
5
Medium Priority
?
542 Views
Last Modified: 2012-09-13
Hi Experts,

I have a requirement of sorting the rows of a html table.

Here the rows  of the table are copied into an actual array to maintain a copy.
The original html table consists of the foll rows saved in the index 0,1,2,3
09/09/2012 Gaara
09/08/2012 Vegeta
09/07/2012 Nappa
09/06/2012 Goku


Then i parse only the date value from the row which is in mm/dd/yyyy and also i get the actual row number in which the date occurs which is in the form 0,1,2,3,.. and so on.
The format is as follows:
09/09/2012~0
09/08/2012~1
09/07/2012~2
09/06/2012~4

What i need is that is the actual sorted row number like which in the above case is 3,2,1,0 so that i can arrange the rows using the actual copy saved before.

If i get this order then i can arrange the original data as follows
09/06/2012 Goku
09/07/2012 Nappa
09/08/2012 Vegeta
09/09/2012 Gaara

Please help...
0
Comment
Question by:gaugeta
  • 2
  • 2
5 Comments
 
LVL 25

Expert Comment

by:lwadwell
ID: 38393946
Are you wanting the table to be sortable or to be displayed in a fixed order?

If a fixed order ... how is the table built?  Is it sourced from a database via a query or what?

If you want the table sortable ... there are various packages available than can do that.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38393951
How are you storing your sorted values you give the example

09/09/2012~0

This this mean you have an array of dates where the ~0 indicates the index of the array?

And what you want is after you have sorted the array how to get the original index of the source row?

How are you sorting the array of dates - can you not make that an array of objects or arrays with each element having two values - date and original row number?
0
 

Author Comment

by:gaugeta
ID: 38394025
@lwadwell & @julianH:Thanks for replying.

@lwadwell:After the table is displayed after queryring the db I want the ros of the table to be flexible such that the rows of the table should be sortable by different columns of the table in this case date.

@julianH:09/09/2012~0
This represents the date vale and the row index which was stored earlier for repopulating after sorting after we get the sort order.
While comparision I do not consider ~0 part by taking the value using substring function and later arrange the ascening or descending aray by using the part after ~ symbol.

BTW how do we do the same comparision of times in the format hh:mm:ss and how is it different from the date comparison.
0
 
LVL 25

Accepted Solution

by:
lwadwell earned 2000 total points
ID: 38394047
Existing javascript packages that add the sorting capability to html tables include (not an exhaustive list by any means)
Sorttable: http://www.kryogenix.org/code/browser/sorttable/
Tablesorter: http://tablesorter.com/docs/
Standardista Table Sorter: http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38394069
@julianH:09/09/2012~0
This represents the date vale and the row index which was stored earlier for repopulating after sorting after we get the sort order.

If it is part of the string then why not just chop of the last bit of the string to get the original index?

Not seeing the problem here.

And as lwadwell says - there are many sorting tools out there. Personally I prefer to sort server side than send hundreds of records to the client - but that's a personal call.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question