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

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

Thu, 8th Dec 2011

Twitter Bootstrap

Twitter Bootstrap is a CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. The great news is that it is actually quite easy to integrate Bootstrap and DataTables such that your fully featured DataTables will match the same look and feel of the rest of your site. In this article I'll show how you can integrate Bootstrap and DataTables together.

There are three basic areas we need to look at to complete the integration:

• Layout
• Sorting controls
• Pagination

Layout

Bootstrap, as you would expect for a CSS library, has a well defined grid system. We want to use this grid system to layout a standard DataTable with the length changing and filtering controls above the table and the table information and pagination controls below the table. To do this we will use the sDom DataTables initialisation parameter to have DataTables create the markup needed. So we start with (see this example running):

$(document).ready(function() {
  $('#example').dataTable( {
    "sDom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>"
  } );
} );

Continue reading...