DataTables

Wed, 1st Feb 2012

Twitter Bootstrap 2

The Twitter Bootstrap folks have just released v2 of their UI framework that has a number of improvements on the v1 series. However, as might be expected from a major upgrade there are also a few API changes. As such, this post is an update to my original article for Bootstrap 1.4 to show how DataTables can be used with Bootstrap 2.

There are a number of changes that effect the DataTables integration in Bootstrap 2:

• Name change for the table classes
• The grid has been changed from 16 to 12 columns
• Classes for table sorting have been removed
• Form elements are not laid out slightly differently
• Minor changes to the table CSS

The paging styling has stayed more or less the same in Bootstrap 2 so fortunately we don't need to modify that at all from my original post.

Continue reading...

Wed, 25th Jan 2012

Microsoft CDN

When using Javascript libraries such as DataTables you want your users to be able to get the software as quickly as possible and one way to help achieve this goal is to use a Content Delivery Network (CDN). CDNs provide edge servers that are tuned to provide media files with very low latency to web-browsers, and as a user receives a file from the CDN the browser will cache it for reuse. This means that different sites using the same Javascript library can share a large performance improvement since the browser does not need to download the same file from different servers for each site.

Microsoft have very kindly offered to host DataTables on their CDN allowing you, as developers using DataTables, to take advantage of their CDN and all the advantages that go with it. Scott Guthrie of Microsoft has a blog post introducing the Microsoft CDN and explaining how it works.

With DataTables available on the Microsoft CDN, it is now wonderfully easy to use DataTables on your site, while also taking advantage of the benefits of using a CDN as media repository. You don't even need to include any media files on your own server!

To include DataTables on your page simply include the following HTML:

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>

Then you can initialise DataTables as you would when including the script from any other server:

$(document).ready(function(){
  $('#example').dataTable();
});

Continue reading...

Mon, 16th Jan 2012

localStorage for state saving

One of the greatest challenges in writing a software library is in maintaining its API and ensuring that upgrades to newer versions of the library are as pain free as possible. The DataTables API has stood the test of time, but from time-to-time there something that has been implemented previously which is not desirable in future versions. In this case, DataTables 1.9 has seen a significant change to how its state saving is done and two old initialisation options have been removed and replaced with much more flexible options.

In the post I'll explain what has changed, the new features of DataTables 1.9 and show how the improvements can be used to very easily implement state saving for a table using localStorage rather than cookies, or any other state store you wish to use.

Continue reading...