Raid Point Sorting

GuildPortal admin site link to original post

This code will allow you to sort your raid point standings table as well as hide all members with less than one raid point. The initial sort will display the member with the highest points at the top as well as sorting the member's names that have the same amount of points. Check it out in action at the bottom of the "Roster" tab of my test-site.

• Double arrows () show that the column is sortable.
• A down arrow () shows that the column has a descending sort applied.
• An up arrow () shows that the column has an ascending sort applied.
• The (+/-) link under the "Curr. Points" will hide or show the members with zero points or less.
• To sort by multiple columns, hold down the shift key while clicking on the header.
  

The Code

<style type="text/css">
th.header {
 background: #222222 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/sort-white.gif) left center no-repeat;
 cursor: pointer;
 font-weight: bold;
 text-align:center;
 padding-left: 10px;
 border-right: 1px solid #00000;
}
th.headerSortUp { background: #400000 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/asc-white.gif) left center no-repeat; }
th.headerSortDown { background: #804000 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/desc-white.gif) left center no-repeat; }
#hideZeros { font-weight:normal; text-align:right; font-size:8pt;}
.hide {display:none;}
</style>
<script src="http://www.guildportal.com/Cms/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 try {
// Add Table Sort
 $("span").each(function () {
  if ($(this).attr('id').match('lblRaidPointTitle')) {
   $(this).parent().find("table:eq(0)").attr("id","RaidTable");
  }
 });
 $("#RaidTable").find("tbody").attr("id","RaidData");
 $("#RaidTable").find("tr:eq(0)").remove();
 var hdr = "<tr><th class=\"{sorter: 'text'}\">Member</th><th class=\"{sorter: 'numeric'}\" width=80";
 hdr += "align=center>Att. Raids</th><th class=\"{sorter: 'numeric'}\" width=80 align=center>M/SU</th>";
 hdr += "<th class=\"{sorter: 'numeric'}\" width=80 align=center>A/P</th><th class=\"{sorter: 'numeric'}\"";
 hdr += "width=80 align=center>Curr. Points</th></tr>";
 $("#RaidData").before("<thead id='RaidHeader'></thead>");
 $("#RaidHeader").html(hdr);
// Add button
 var hideImage = '(+/-)';
 var CurrentPoints = "Curr. Points";
 var filter = "eq(" + columnNum(CurrentPoints) + ")";
 var temp = $("#RaidHeader").find("th:" + filter).html();
 temp += " <a href='#' id='hideZeros'>" + hideImage + "</a>"
 $("#RaidHeader").find("th:" + filter).html(temp);
 $("#hideZeros").click(function() {
  $("#RaidData").find("tr").each(function() {
   if ($(this).find("td:" + filter).html() < 1) {
    $(this).toggleClass("hide");
   }
  })
 })
 $("#RaidTable").tablesorter({
  textExtraction: function(node) {
   var xx = node.innerHTML.toLowerCase();
   if (xx.match("history")) {
    var temp = xx.substring(0,xx.indexOf("<br>"));
    return temp.replace(/~/g,"").replace(/-/g,"").replace(/\./g,"").replace(/\*/g,"");
   }
   if (xx.match("viewindividual")) {
       temp = node.childNodes[0].innerHTML;
       return temp.substr(temp.indexOf("/")+1,temp.length);
   }
   return xx;
  }
  ,sortList: [[4,1],[0,0]]
 });
} catch (e) {}
})
function columnNum(x) {
 var counter = 0;
 var temp = false;
 $("#RaidHeader").find("th").each(function() {
  if ($(this).text().match(x)) {temp = counter;}
  counter++;
 });
 return temp;
}
</script>

Customizing

CSS

• Change the background color in blue to highlight the header to show if the column has an ascending or descending sort applied.
  
  
• "th.header" is the style for the entire table header. It includes the sort arrow - use a custom one, or the one below that matches your site).
• Black (): http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/sort-black.gif
  
• White (): http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/sort-white.gif
  
  
• "th.headerSortUp" is displayed when the ascending sort is applied
• Black (): http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/asc-black.gif
  
• White (): http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/asc-white.gif
  
  
• "th.headerSortDown" is displayed when the descending sort is applied.
• Black (): http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/desc-black.gif
• White (): http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/desc-white.gif
  
  
• "#hideZeros" is the styling for the "(+/-)" text. If you choose to replace that the text with an image, then this won't do anything.
  

Script

• If you want to replace the "(+/-)" to hide or show the zero points, then look in the script for the green text
  
  var hideImage = '(+/-)';
  
  this can be replaced with text or even an image:
  
  var hideImage = '<img src="URL TO IMAGE">';
  
  
• The default sort order with this script is set as follows:
  
  1. Descending sort on "Curr. Points" column (4th column, if you start to count with a zero from left to right)
     
  2. Ascending sort on "Members" column (column zero - the furthest left column is always numbered zero)
     
  
  To change this, look for:
  
  sortList: [[4,1],[0,0]]
  
  The "4" tells the script to sort the 4th column, the "1" tells the script that it is descending. Then the first "0" tells the script to sort column zero, and the second "0" tells it to sort it ascending.
  
  For more details on how to change this sort list or anything else with the script, refer to this web site: Tablesorter.
  
  
• If in the future this table is reformated and this script stops working, look for the text in purple. Otherwise don't mess with it!!
  
• "history" is the text that script looks for in the member's column... from the link "(point history)"
• "Curr. Points" is the title of the Current Points header that the script searches for to add the hide zero toggle.
  

Edit (10/6/08): Added some code to prevent making an error when it's not on the raid point page
Edit (10/31/08): Fixed the problem with this script not working with IE.
Edit (12/24/08): Fixed one line to prevent this script from replacing the "Recent Forum" header... highlighted with a blue background.