Code a multistate sort or multiple columns?

Question

First time post to stackoverflow!

Really liking so much about tablesorter, and its flexibility. Thank you!

I have a coded name and wish to sort on last name without showing it anywhere. I currently use two columns, the codename (first_name last initial) and no label on the second (last name). Here's my header rows:

<th>Participant</th>
<th class='sorter-sortlast' title='Last Name'>&nbsp;</th>

Here's some data:

<tr>
  <td>BobF</td>
  <td sort_code='001022'></td>
</tr>
<tr>
  <td>GeorgeB</td>
  <td sort_code='001007'></td>
</tr>

and my parser

  $.tablesorter.addParser({
    id: 'sortlast',
    is: function(s, table, cell, $cell) {
      return false;
    },
    format: function(s, table, cell, cellIndex) {
      return cell.getAttribute('sort_code'); //s;
    },
    parsed: true,
    type: 'numeric'
  });

Questions: How can I improve this so that I either

1. Have only one column and click multiple times, or
2. Have two columns, and squeeze it together so the last name column looks like it's part of the Participant column?

Wondering:

1. I saw some code that catches the header clicks and changes thing depending on existing classes, here: how to get current sort order from tablesorter plugin? This could be a solution. It changes the classes, i.e., headerSortDown. I could change text of header to indicate it's now sorting by last name. Makes it hard to shift-click for multiple sorts - or does it?! The sort_code would move to the first column and the second column goes away.

2. If I were to do this css approach, how do I change the width of the columns, and particularly second column (last name) and hide the divider between the two columns? I tried adding a class (.hideLeftBorder, .hideRightBorder) to do this, but nothing. I forced it by putting the css directly into the th and td: style='border-right-width:0;'. This looked okay, except for the excessive padding. (Where do I remove that, please, btw?)

Thanks for your consideration!

Answer 1

It appears you're using this fork of tablesorter, so luckily there are already some examples available.

• This Stackoverflow answer shows how you can click on the header or a span inside the header to sort a column using different content.
• And this Stackoverflow answer show how to make the column perform an ascending sort on one set of data, and a descending sort on another set of data.

In both of the above cases, a hidden column isn't necessary. All the data can go into one cell.

Also, the code you found that catches the header clicks was written for the original tablesorter as the class names have completely changed; anyway, it would be more efficient to use the sortList value to figure out sort direction.

Lastly, this isn't related to the above answers, but I would not recommend adding table cell attributes like sort_code, but instead use HTML5 data-attributes (e.g. data-sort-code).