tag:blogger.com,1999:blog-82996727300080692852023-11-15T15:24:31.049+01:00Erno Zsemlye's weblogA blog on Drupal, Mac and Web development.zsernohttp://www.blogger.com/profile/13621423880990573874noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-8299672730008069285.post-57228716497725650852010-01-20T10:49:00.012+01:002010-01-20T11:44:36.043+01:00Make any table sortable using Tabelsorter.<span style="font-family: Arial, Helvetica, sans-serif;">Ever wanted to sort a table according to your needs on a website but it was lack of this feature? </span><br />
<div><span style="font-family: Arial, Helvetica, sans-serif;">Fortunately there's a pretty nice solution.</span><br />
</div><div><a href="http://tablesorter.com/docs/"><span style="font-family: Arial, Helvetica, sans-serif;">Tablesorter</span></a><span style="font-family: Arial, Helvetica, sans-serif;"> is an excellent </span><a href="http://jquery.com/"><span style="font-family: Arial, Helvetica, sans-serif;">jQuery</span></a><span style="font-family: Arial, Helvetica, sans-serif;"> plugin created by <a href="http://lovepeacenukes.com/">Christian Bach</a>.</span><span style="font-family: Arial, Helvetica, sans-serif;"> It can turn any standard HTML table into a fully sortable table without page refresh.</span><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;">All we need to do is include the source file and apply it's tablesorter() method on the desired table(s).</span><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;">Of course, it has a bunch of useful settings which are fairly described in the documentation.</span><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><a name='more'></a></span><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;"><b>Applying it on a live website</b></span><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;">Certainly, tablesorter is a great plugin in itself and can come handy if you need it for your own projects. However it's real power comes to the surface if we use it together with <a href="https://addons.mozilla.org/en-US/firefox/addon/748">Greasemonkey</a>, a great Firefox add-on.</span><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
</div><span style="font-family: Arial, Helvetica, sans-serif;">As a real-life example, we'll use it on <a href="http://localize.drupal.org/">http://localize.drupal.org</a>, which is a community hub for translating Drupal projects. The reason is very simple. We would like nations to be ordered by number of untranslated strings.</span><br />
<div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;">First we need to make Greasemonkey and jQuery work together. Fortunately <a href="http://joanpiedra.com/">Joan Piedra</a> has a <a href="http://joanpiedra.com/jquery/greasemonkey/">nice solution</a> for this.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: #eeeeee; font-size: 12px;"></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><pre style="-webkit-background-clip: initial; -webkit-background-origin: initial; background-attachment: initial; background-image: initial; background-repeat: initial; border-bottom-color: rgb(153, 153, 153); border-bottom-style: dotted; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: dotted; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: dotted; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: dotted; border-top-width: 1px; font-size: 12px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; padding-top: 8px;"><code><span style="color: #f3f3f3;"><span style="background-color: black; overflow-x: scroll; overflow-y: scroll;">// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery() {
alert($); // check if the dollar (jquery) function works
}</span></span></code></pre></span><span style="font-family: Arial, Helvetica, sans-serif;">As we can see all our custom jQuery code gets executed when jQuery is fully loaded. So far so good. Next step is to load and apply tablesorter on desired table(s).</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><pre style="-webkit-background-clip: initial; -webkit-background-origin: initial; background-attachment: initial; background-image: initial; background-repeat: initial; border-bottom-color: rgb(153, 153, 153); border-bottom-style: dotted; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: dotted; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: dotted; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: dotted; border-top-width: 1px; font-size: 12px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; padding-top: 8px;"><code><span style="color: #f3f3f3;"><span style="background-color: black; overflow-x: scroll; overflow-y: scroll;">// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
</span></span></code></pre><pre style="-webkit-background-clip: initial; -webkit-background-origin: initial; background-attachment: initial; background-image: initial; background-repeat: initial; border-bottom-color: rgb(153, 153, 153); border-bottom-style: dotted; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: dotted; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: dotted; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: dotted; border-top-width: 1px; font-size: 12px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; padding-top: 8px;"><code><b><span style="color: #f3f3f3;"><span style="background-color: black; overflow-x: scroll; overflow-y: scroll;">// Add Tablesorter jQuery plugin.
var GM_TS = document.createElement('script');
GM_TS.src = 'http://tablesorter.com/jquery.tablesorter.min.js';
GM_TS.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_TS);</span></span></b><span style="color: #f3f3f3;"><span style="background-color: black;">
</span></span></code></pre><pre style="-webkit-background-clip: initial; -webkit-background-origin: initial; background-attachment: initial; background-image: initial; background-repeat: initial; border-bottom-color: rgb(153, 153, 153); border-bottom-style: dotted; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: dotted; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: dotted; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: dotted; border-top-width: 1px; font-size: 12px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; padding-top: 8px;"><code><b><span style="color: #f3f3f3;"><span style="background-color: black; overflow-x: scroll; overflow-y: scroll;">// Add Custom CSS.
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'http://tablesorter.com/themes/blue/style.css';
link.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(link);</span></span></b></code></pre><pre style="-webkit-background-clip: initial; -webkit-background-origin: initial; background-attachment: initial; background-image: initial; background-repeat: initial; border-bottom-color: rgb(153, 153, 153); border-bottom-style: dotted; border-bottom-width: 1px; border-left-color: rgb(153, 153, 153); border-left-style: dotted; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: dotted; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: dotted; border-top-width: 1px; font-size: 12px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; padding-top: 8px;"><code><span style="color: #f3f3f3;"><span style="background-color: black; overflow-x: scroll; overflow-y: scroll;">// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined' </span></span><b><span style="color: #f3f3f3;"><span style="background-color: black;">|| typeof unsafeWindow.jQuery.tablesorter == 'undefined'</span></span></b><span style="color: #f3f3f3;"><span style="background-color: black;">) { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery() {
</span></span><b><span style="color: #f3f3f3;"><span style="background-color: black; overflow-x: scroll; overflow-y: scroll;"> $(function() {
// Keep table's original width.
var originalWidth = $(".l10n-community-overview").css('width');
// Apply tablesorter.
$(".l10n-community-overview").tablesorter({sortList: [[2,0]]}).addClass('tablesorter').css('width', originalWidth);
// Site specific theme tayloring.
$('.sticky-header').addClass('tablesorter').css('margin-top', '0');
$(".l10n-community-overview th.header, .sticky-header th").css('padding-right', '21px');
}
);</span></span></b><span style="color: #f3f3f3;"><span style="background-color: black;">
}</span></span></code></pre></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">That's it. We load tablesorter plugin (and one of its themes) then apply it on tables that have class <span style="font-family: monospace, Helvetica, sans-serif; font-size: 12px; font-weight: bold; white-space: pre;">l10n-community-overview,</span><span style="font-family: monospace, Helvetica, sans-serif; white-space: pre;"> </span><span style="white-space: pre;">by simply calling <span style="font-family: monospace, Helvetica, sans-serif; font-size: 12px; font-weight: bold;">tablesorter({sortList: [[2,0]]}). </span></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: small;">(Note: </span><span style="font-family: monospace, Helvetica, sans-serif;"><b><span style="font-size: small;">{sortList: [[2,0]]}</span></b></span><span style="font-family: monospace, Helvetica, sans-serif; font-weight: bold;"><span style="font-size: small;"> </span><span style="font-family: Arial, Helvetica, sans-serif; font-weight: normal;"><span style="font-size: small;">is a configuration object with which we order by column #3, ascending.)</span></span></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space: pre;"><br />
</span></span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://dl.dropbox.com/u/2630807/blog/tablesorter/tablesorter_endresult.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="http://dl.dropbox.com/u/2630807/blog/tablesorter/tablesorter_endresult.jpg" width="400" /></a><br />
</div><span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space: pre;"><br />
</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space: pre;"><span style="white-space: normal;">Full Greasemonkey script can be downloaded here: <a href="http://dl.dropbox.com/u/2630807/blog/tablesorter/sort_table.user.js">sort_table.user.js</a> (If you have Greasemonkey installed, just click on the link and hit install.)</span></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: small;">(Note: since </span><a href="http://localize.drupal.org/"><span style="font-size: small;">http://localize.drupal.org</span></a><span style="font-size: small;"> is a Drupal site, it already has the jQuery library loaded, so there is no need to add it again in this script.)</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: small;"><br />
</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Enjoy!</span><br />
</div>zsernohttp://www.blogger.com/profile/13621423880990573874noreply@blogger.com0tag:blogger.com,1999:blog-8299672730008069285.post-87594903278968623132009-11-15T21:10:00.000+01:002009-11-15T21:10:33.186+01:00WelcomeHey there, <br />
<div><br />
</div><div>It's me, Erno (mostly known as zserno in cyberspace). I've created this blog because I want to share all the interesting stuffs I learn, create and discover during my work. I'll mostly write about Drupal, OS X and different Web development topics.<br />
</div><div>You can also follow me on twitter: http://twitter.com/zserno<br />
</div><div><br />
</div><div>Stay tuned!<br />
</div>zsernohttp://www.blogger.com/profile/13621423880990573874noreply@blogger.com0