?
Solved

jquery tablesorter plugin - colspan

Posted on 2009-12-29
6
Medium Priority
?
1,291 Views
Last Modified: 2012-05-08
I'm trying to accomplish something a bit non-standard with the jquery tablesorter plugin, and need to know if it's even possible.

I have a table with the following column headers
<table>
<thead>
<th>Name</th>
<th>Address</th>
<th>BirthDay</th>
<th>BirthMonth</th>
<th>BirthYear</th>
</thead>
<tbody>
<tr>
     <td>Joe</td>
     <td>2 Penn Plaza, NY, NY</td>
     <td colspan=3>June 18, 1947</td>
</tr>
...
</tbody>
</table>


is it possible to tell the tablesorter to sort the last column according to different criteria when the header cell is clicked, either sort by Day, Month or Year (but still display the date as a single column in the table body)
?

thanks!



0
Comment
Question by:SurveyD
  • 4
  • 2
6 Comments
 
LVL 3

Expert Comment

by:Nithyanandhan_T
ID: 26138669
1) Here is a tricky way..

http://tablesorter.com/docs/example-parsers.html

Look into the format: function(s) in the above link. Replace your date with the day of the date or month of the date(in numeric) or year of the date. Then it will sort accordingly.

2) You can do the same logic by just changing the date format..
change it to Date- month- year format, then you can sort by day alone, if you specify in year-month-date , then you can sort by year

http://old.nabble.com/tablesorter-help---sort-by-date-wont-work!-td26286016s27240.html

0
 

Author Comment

by:SurveyD
ID: 26138784
Nithyanandhan_T,

thanks for the quick reply.   It's not the date formatting that's giving me trouble. it's the COLSPAN.

When i click on the first, second or third column it tries to sort correctly, but header columns 4 and 5 try to access table body columns 4 and 5 to sort them, and they don't exist (because the colspan exists in the body, but not the header) so an error occurs.
0
 
LVL 3

Expert Comment

by:Nithyanandhan_T
ID: 26138876
It will be a mess to sort a column on clicking a different column header.

Instead have only three headers

<table>
<thead>
<th>Name</th>
<th>Address</th>
<th>Date</th>
</thead>
<tbody>
<tr>
     <td colspan=3>
</td>
</tr>
<tr>
     <td>Joe</td>
     <td>2 Penn Plaza, NY, NY</td>
     <td colspan=3>June 18, 1947</td>
</tr>
...
</tbody>
</table>


0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:Nithyanandhan_T
ID: 26138922
Please ignore my previous post.. I've posted accidentally..

It will be a mess to sort a column on clicking a different column header.

Instead have only three headers

<table>
<thead>
<th>Name</th>
<th>Address</th>
<th>Date</th>
</thead>
<tbody>
<tr>
     <td colspan=3>
       <a href onclick="sortByDay()">Sort by Day</a>
       <a href onclick="sortByDay()">Sort by Month</a>
       <a href onclick="sortByDay()">Sort by Year</a>
     </td>
</tr>
<tr>
     <td>Joe</td>
     <td>2 Penn Plaza, NY, NY</td>
     <td colspan=3>June 18, 1947</td>
</tr>
...
</tbody>
</table>


You can trigger sorting from the any java script method. On click of Sort by day/month/year hyper link.. corresponding method will be called and you can do the below logic to do the corresponding sorting..

http://tablesorter.com/docs/example-parsers.html

Look into the format: function(s) in the above link. Replace your date with the day of the date or month of the date(in numeric) or year of the date. Then it will sort accordingly.
0
 

Author Comment

by:SurveyD
ID: 26139661
excellent....that's almost completely what i need.   I hadn't thought of combining the header columns into one, so thanks for that.
finally, would you happen to know the syntax for forcing the sort on one of these click events?
Do i simply call the .tableSorter function again, and re-assign the "sort by" values for each column?
0
 
LVL 3

Accepted Solution

by:
Nithyanandhan_T earned 2000 total points
ID: 26140303
here is the best site for all JQuery tablesorter needs
http://tablesorter.com/

Here is how you can find how to trigger sorting on click of a link..
http://tablesorter.com/docs/example-trigger-sort.html

to reassign the "sort by" values  you have to something like in the below URL..
http://tablesorter.com/docs/example-parsers.html

You have to do some tweaks in the  method - format: function(s)  something like

        format: function(s) {
            // format your data for normalization
             var day = getDayFromDate(s); //this is just a example method name.. google for specific javascript method name
            return day;
        },

add one more input parameter to the above method to decide the return value(whr day/month/year based on the link clicked)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
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)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

864 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