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
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.
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.