jQuery Data Tables

One of the most prominent controls we are using in these applications is jQuery DataTables. It’s very powerful and easy to use.

What we have found while using it is that a few requirements come up repeatedly. We’ve been quietly factoring these pieces into a utility library lib/datatable.js

When we first used this control we were doing a lot of the work on the Lua backend to massage the data into the format that this control requires.  After some rethinking of that we’ve instead shifted to making the JSON which comes out of the Lua backend very plain.  Instead we do all the jQuery datatable data manipulation on the client side Javascript to get it into the format required.

In general our thought process is that this is part of the presentation layer and so it makes sense to decouple the data layer from the presentation layer.  It makes it easier to drop in another type of browser control in the future if we want to.

You can see this philosophy in action right by looking at the channel manager’s usage of this control:

• cm.app.listChannels shows the back end code – notice it’s not very complicated.
• dashboard.js shows the Javascript front end.   We try to avoid hard coding HTML and img tags etc. in the Javascript.  Instead we put that style information in the CSS file for the channel manager.

For comparison have a look at this older snapshot of the cm.app.listChannels which has a lot of formatting and HTML tags in the back end Lua scripts.  Much harder to follow and maintain.

You can see a couple of handy helper functions:

• lib.datatable.addSearchHighlight adds yellow highlighting when the search is activated on a table.
• lib.datatable.hideNavigationArrows hides the Next/Previous buttons when you don’t need them.