DataTables logo DataTables

Thu, 27th Sep 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:

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

Continue reading...

Thu, 9th Aug 2012

Orthogonal data

Data is complex. Not only will data displayed in your tables have rules relating how each data point corresponds to the others in your table, but also each data point itself can take multiple forms. Consider for example currency data; for display it might be shown formatted with a currency sign and thousand separators, while sorting should happen numerically and searching on the data will accept either form. In this post we'll examine how DataTables can use different forms of single data points to present a complex data set in an intuitive manner for the user of the table.

DataTables has four built-in data operations, each of which can potentially use an independent data source. These four operations are:

  • Display
  • Sorting
  • Type detection
  • Filtering

By default DataTables will use the same data for all four operations, but with DataTables 1.9 this can easily be modified.

Continue reading...

Thu, 9th Aug 2012

Extended data source options with DataTables

Welcome to the new DataTables blog! I would like to use this section of the site to introduce various topics which are useful for DataTables and give tutorials about how to integrate some of the more advanced aspects of DataTables into your site.

For my first post, I'd like to introduce one of the new features in the forthcoming 1.8 release of DataTables (which is currently in beta: available here) - that of extended data source options. This new feature in DataTables 1.8 relaxes the data formatting constraints that DataTables places on the data source. In previous releases of DataTables the following data structure is expected for server-side processing or Ajax sourced data:

[
	[ "row 1, cell 1", "row 1, cell 2", "row 1, cell 3" ],
	[ "row 2, cell 2", "row 2, cell 2", "row 2, cell 3" ]
]

This is an array of arrays, with (exactly) one element given for each of the cells in the table. Any deviations from this structure, or extra elements in the arrays, would result in an error being given. While this is adequate for many tables, and server-side scripts flexible enough to allow this formatting to be generated without significant modification, it is not particularly flexible.

To increase the flexibility of the data source, you may wish to return an array of objects, like this:

[
	{ "cell1": "row 1, cell 1",
	  "cell2": "row 1, cell 2",
	  "cell3": "row 1, cell 3" 
	},
	{ "cell1": "row 2, cell 1",
	  "cell2": "row 2, cell 2",
	  "cell3": "row 2, cell 3" 
	}
]

In this manner you could pass back extra information which is not needed for rendering the table directly. This could be useful for showing and hiding details about a particular row, based on information that is not visible in the table. Previously this had to be done with information in hidden columns, or with an extra Ajax request. This ability to read information from objects is what is introduced in DataTables 1.8, through the use of the mData initialisation option for aoColumns.

Continue reading...

< Previous posts |
Newer posts >