It’s the Web, just Kwwika

Dynamically sorting a table with jQuery tablesorter plugin

I'm in the middle of building our user dashboard and have been using jQuery extensively to add a rich feel to the UI. Since our focus is data it's not surprising that I have some tables in our UI. I decided I should add some sorting functionality to the table for a couple of reasons; Iare dynamically adding rows to the table when new data is created and I also want Kwwika users to be able to sort tables to help them find data.

Rather than write some JavaScript from scratch, and was the case for many years, I automatically did a search for jQuery sort plugins and I managed to compile a list of few that seem to work or at least have potential. I eventually decided to go with tablesorter since it's been around for a while, is pretty stable, the code isn't too complex for what shouldn't be a complex thing and the styling was also nice an basic and could easily be customised.

We got the manual sorting functionality up and running really easily and I then added a couple of calls to first let the plugin know the data had been updated and then to tell the plugin to sort the table. Here's the code in its simplest format.

When you click the add button eventually the table.trigger("sorton", [[[1,0]]]) is called. The first parameter is the method to be called and the second parameter is something the documentation refers to as a sort list (important note: this parameter should be an array of parameters as defined in the jQuery trigger docs - this got us for a bit):

An array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]]

But it doesn't work!

Those of you who have worked with JavaScript for a while will probably be aware that it's single-threaded (for getting Web Workers) and that queued scripts only get a chance to execute either when one finishes or a setTimeout is called. My hunch was that something within the "update" trigger call had pushed some execution into a setTimeout call so to work around this I needed to do the same for my "sorton" trigger call to make sure that all other processed had finished execution and the DOM and the tablesorter plugin were in the state I wanted to be in.

setTimeout(function()

{

var sorting = [[1,0]];

table.trigger("sorton", [sorting]);

}, 0);

It worked!

So, you'll be pleased to hear that the data tables within the Kwwika User Dashboard are nice and dynamic ready for users to find and organise their data.

Demo

Here's a link to a working demo.

Here's a full working listing of some example code:

Filed under // JavaScript UI User Dashboard jQuery jQuery tablesorter plugin

Posted by email

Comments [0]

jQuery Real-Time Push Kwwika Plugin v0.1 released

Kwwika already makes it really easy to add real-time push functionality to any web page or website but we've gone a little bit further to try to make it even easier by writing a small but powerful jQuery plugin.

The jQuery Real-Time Push Kwwika Plugin allows you to define elements within a web page that you want to be updated with real-time data as soon as it's available. Anybody that has used a jQuery plugin should find our jQuery plugin really simple to use.

Here's how to use it.

Register for the Kwwika Beta programme

In order to use Kwwika you must first register so we can set up permissions within the Kwwika system to allow your website/domain to receive real-time push data from Kwwika.

So, register for the Kwwika Beta programme now.

Include script tags

You need to include the core jQuery library, the Kwwika JavaScript API and the jQuery Real-Time Push Kwwika Plugin files in your web page:

<script

src="http://code.jquery.com/jquery-1.4.2.min.js"

type="text/javascript"></script>

<script

src="http://api.kwwika.com/latest/"

type="text/javascript"></script>

<script

src="http://api.kwwika.com/latest/plugins/jQuery/jquery.kwwika/jquery.kwwika.js"

type="text/javascript"></script>

Define HTML

You define the topic to be requested from Kwwika by adding an attribute to an HTML element. The default attribute to identify the topic to request is data-topic. You identify the value to be placed within the element by adding a data-field attribute to the same element. In the example below if an update occurs on the /KWWIKA/TWITTER/SEARCHES/KWWIKA topic with a value for the ScreenName field it will be inserted as the html contents of the first <div> element.

We've decided to use attributes with a prefix of "data-" as the present HTML 5 draft suggests custom attributes should use this prefix.

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

<html>

<body>

<div data-topic="/KWWIKA/TWITTER/SEARCHES/KWWIKA"

data-field="ScreenName"></div>

<div data-topic="/KWWIKA/TWITTER/SEARCHES/KWWIKA"

data-field="Text"></div>

</body>

</html>

Call the jQuery plugin

You call the jQuery Real-Time Push Kwwika Plugin in the same way you call any other jQuery plugin, by supplying a selector to the jQuery method ($) and calling the kwwika() function.

<script type="text/javascript">

$(function ()

{

$("div").kwwika();

});

</script>