Learning jQuery - Finessing the Sort Keys
Now we want to apply the same kind of sorting behavior to the Author(s) column of our table. By adding the sort-alpha class to its table header cell, the Author(s) column can be sorted with our existing code. But ideally authors should be sorted by last name, not first. Since some books have multiple authors, and some authors have middle names or initials listed, we need outside guidance to determine what part of the text to use as our sort key. We can supply this guidance by wrapping the relevant part of the cell in a tag:
-
<tr>
</tr>
-
<td> </td>
-
Building Websites with Joomla! 1.5 Beta 1 -
<td> </td>
<td> </td>
Hagen <span class="sort-key">Graf</span> -
<td> </td>
Feb 2007 -
<td> </td>
$40.49 -
-
<tr>
</tr>
-
<td> </td>
-
Learning Mambo: A Step-by-Step Tutorial to Building Your Website -
-
<td> </td>
Douglas <span class="sort-key">Paterson</span> -
<td> </td>
Dec 2006 -
<td> </td>
$40.49 -
-
<tr>
</tr>
-
<td> </td>
-
<td> </td>
Moodle E-Learning Course Development -
<td> </td>
William <span class="sort-key">Rice</span> -
<td> </td>
May 2006 -
<td> </td>
$35.99 -
%0D%0A%3Ctr%3E%0D%0A%3C%2Ftr%3E%0D%0A%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0A%0A%0D%0ABuilding%20Websites%20with%20Joomla%21%201.5%20Beta%201%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0AHagen%20%3Cspan%20class%3D%22sort-key%22%3EGraf%3C%2Fspan%3E%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0AFeb%202007%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0A%2440.49%0A%0D%0A%0A%0D%0A%3Ctr%3E%0D%0A%3C%2Ftr%3E%0D%0A%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0A%0A%0D%0ALearning%20Mambo%3A%20A%20Step-by-Step%20Tutorial%20to%20Building%20Your%20Website%0A%0D%0A%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0ADouglas%20%3Cspan%20class%3D%22sort-key%22%3EPaterson%3C%2Fspan%3E%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0ADec%202006%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0A%2440.49%0A%0D%0A%0A%0D%0A%3Ctr%3E%0D%0A%3C%2Ftr%3E%0D%0A%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0A%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0AMoodle%20E-Learning%20Course%20Development%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0AWilliam%20%3Cspan%20class%3D%22sort-key%22%3ERice%3C%2Fspan%3E%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0AMay%202006%0A%0D%0A%3Ctd%3E%20%3C%2Ftd%3E%0D%0A%2435.99%0A%0D%0A
Now we have to modify our sorting code to take this tag into account, without disturbing the existing behavior for the Title column, which is working well. By prepending the marked sort key to the key we have previously calculated, we can sort first on the last name if it is called out, but on the whole string as a fallback:
$. each(rows, function(index, row ) { var $cell = $(row).children('td').eq(column); row.sortKey = $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase(); });
%24.each%28rows%2C%20function%28index%2C%20row%29%20%7B%0A%0D%0Avar%20%24cell%20%3D%20%24%28row%29.children%28%27td%27%29.eq%28column%29%3B%0A%0D%0Arow.sortKey%20%3D%20%24cell.find%28%27.sort-key%27%29.text%28%29.toUpperCase%28%29%0A%0D%0A%2B%20%27%20%27%20%2B%20%24cell.text%28%29.toUpperCase%28%29%3B%0A%0D%0A%7D%29%3B
Sorting by the Author(s) column now uses the last name:

If two last names are identical, the sort uses the entire string as a tiebreaker for positioning.
Trackback(0)
|