Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Raids > Sorting the Raid Point Standing Table
Mottie (SuperAdmin) 10/5/2008 9:45 AM EST : Sorting the Raid Point Standing Table
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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
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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%