Saturday 28th January, 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.9.4/css/jquery.dataTables.css">

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

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

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

pre class="brush: js; font-size: 75%"> $(document).ready(function(){ $('#example').dataTable(); }); ```

Files

There are four files which will be of primary interest to you when using DataTables from the CDN:

jquery.dataTables.js - DataTables - unminified. This is particularly useful for debugging.
jquery.dataTables.min.js - DataTables - minified. Generally speaking this is the Javascript file to use for deployments.
jquery.dataTables.css - Base line CSS for DataTables. This file provides basic positioning of DataTables control elements and styling of the table. The class of "dataTable" should be added to any table that you wish to use as a DataTables (this will be done automatically with DataTables 1.9).
jquery.dataTables_themeroller.css - Base line CSS for DataTables when used with ThemeRoller. Very similar to jquery.dataTables.css, with a few additions for integrating the table fully with ThemeRoller themes.

The other files that are available on the CDN are image files for the CSS and will be included automatically, as required.

Example

The table below is an example of a DataTable which is using DataTables as provided by the Microsoft CDN:

Open demo in a standalone page

Conclusion

I'd like to take this opportunity to thank Microsoft and the Ajax CDN team for giving DataTables a new home on their CDN! I'm really looking forward to seeing how DataTables is used from this fantastic new resource.