This tutorial will show how to make a table "sortable" by adding the jQuery tablesorter plugin. The example used was done using the Blue PAS Theme therefore adding this functionality would be fairly easy if using that template. Making it work for another template is not difficult but does require a good understanding of CSS. The example also integrates the offers table from this offers table tutorial.
Example site
How it Works
It allows users to quickly sort your tabular data in ascending/descending order using column headings as toggle switches. Basically the plugin can be activated on any table, with a class (or ID) of your choosing.
Requirements
jQuery is required as well as the tablesorter plugin file. Both are already installed on all PAS sites. There are also a few HTML markup requirements:
1) The clickable headings for each column need to be th elements nested within thead. For more on that see HTML thead explanation & example.
2) The data which will be sorted should all be nested within tbody. You may use a mix of td and th elements.
Step 1: CSS
The items which require CSS are the arrows which give the user the indication that they may click on the heading to sort the table rows. Also, there is some extra CSS to handle row striping.
PAS Example:
Add the following to "css > theme.css", and overwrite your existing "alternating row color" styles:
PHP Code:
/* ALTERNATING ROW COLORS */
table.pas_data_table tbody tr.odd td,
table.pas_data_table tbody tr.odd th {
background: #DEE4ED;
}
Add the following to "css > theme.css", and overwrite your existing "data table" styles:
PHP Code:
/* DATA TABLE */
table.pas_data_table {
width: 100%;
font-size: 12px;
margin: 8px 0;
}
table.pas_data_table tbody th {
text-align: left;
padding-left: 5px;
color: #000;
}
table.pas_data_table thead td {
font-weight: bold;
text-align: left;
color: #000;
background: #A2BCDD;
padding: 4px;
}
table.pas_data_table tbody td {
color: #000;
padding: 3px;
}
table.pas_data_table th.header {
background:#A2BCDD url({{ image_dir }}/bg.gif) no-repeat left center;
cursor: pointer;
font-weight: bold;
text-align:left;
font-weight: bold;
text-align: left;
color: #000;
padding: 4px 0 4px 16px;
border:none;
}
table.pas_data_table thead th.headerSortUp {
background:#8eacd2 url({{ image_dir }}/asc.gif) no-repeat left center;
}
table.pas_data_table thead th.headerSortDown {
background:#8eacd2 url({{ image_dir }}/desc.gif) no-repeat left center;
}
table.pas_data_table thead th.title {
background-image:none;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 12px;
border-style: solid;
border-width: 1px;
border-color: #6396D3 #355C8C #355C8C #6396D3;
background: #2F65A8;
padding: 3px;
}
Step 2: Images
The arrows which indicate sort state and may be downloaded here. Just upload each of the 3 images within the zip file to your site’s root Images directory.
Step 3: Edit HTML
The plugin gets activated on any table with a selected CSS class (or ID) via javascript. This means you will want to come up with a unique class since you don’t want it activated on ALL tables.
PAS Example
I added the class “table-sort” to the offers table. For color/display reasons I also had to change the markup by adding a class of “title” to the spanning th within thead.
The following code can be pasted on any page on a PAS site to display offers (example here):
PHP Code:
<style>
table.offers-table img {
width:20px; height: 20px;
}
</style>
<table class="pas_data_table table-sort offers-table" cellspacing="0">
<thead>
<tr>
<th class="title" colspan="6">Rakeback Offers</th>
</tr>
<tr>
<th colspan="2">Poker Site</th>
<th>Rakeback</th>
<th>Network</th>
<th>Signup Bonus</th>
<th>More Info</th>
</tr>
</thead>
<tbody>
{% for row in rb_offers|group_by:3 %}
{% for offer in row %}
<tr>
<td><a href="{{ offer.review_page }}"><img src="{{ tld }}/images/icons/icon_{{ offer.image_id }}.gif" border="0"/></th>
<th>{{ offer.name }}</th>
<td><strong>{{ offer.reward }}</strong></td>
<td>{{ offer.network }}</td>
<td>{{ offer.bonus }} Bonus</td>
<td><a href="{{ offer.review_page }}">more info</a></td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
<br /><br />
<style>
table.offers-table img {
width:20px; height: 20px;
}
</style>
<table class="pas_data_table offers-table" cellspacing="0">
<thead>
<tr>
<th id="title" colspan="6">Bonus Offers</th>
</tr>
<tr>
<td colspan="2">Poker Site</td>
<td>Network</td>
<td>Bonus</td>
<Td>More Info</td>
</tr>
</thead>
<tbody>
{% for row in bonus_offers|group_by:3 %}
{% for offer in row %}
<tr>
<td><a href="{{ offer.review_page }}"><img src="{{ tld }}/images/icons/icon_{{ offer.image_id }}.gif" border="0"/></td>
<th>{{ offer.name }}</th>
<td>{{ offer.network }}</td>
<td>{{ offer.bonus }} Bonus</td>
<td><a href="{{ offer.review_page }}">more info</a></td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
Step 4: Javascript
All PAS sites have access to the plugin and it has been updated so all you have to do is add the snippet which activates it on your table. The 2nd part of the snippet adds an “odd” class to table rows and helps properly maintain alternate row classes which enable “zebra striping”, even when the rows are sorted dynamically.
PAS Example:
Add the following to "layout > layout.html", near the top, after the javascript includes.
PHP Code:
<script type="text/javascript">
$(document).ready(function() {
$(".table-sort").tablesorter({
widgets: ['zebra']
});
$(".pas_data_table tbody tr:odd").addClass("odd");
});
jQuery(document).ready(function(){
});
</script>
Conclusion
Visit the tablesorter plugin site for more examples, config options and documentation.
Go to Profile
Mark as Read
Blog Categories
