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

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

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

In this post I will look at the feature plug-in abilities and describe how a feature plug-in can be created, quite easily, for DataTables. I will also describe how to create and use a custom API method along the way - used as part of the feature plug-in. Creating feature plug-ins in this manner allow for greater code reuse and sharing of code between pages and authors. The extras available for DataTables use this feature plug-in method to integrate tightly with DataTables.

To demonstrate how to build a feature plug-in, here I will build one which will simply show and hide the paging control based on if it is needed or not (a reasonably common request in the forum). For example if the table rows can all be displayed on one page, there is no need to show the paging control (even although it is disabled at that point) - this situation can change dynamically based on the filtering applied to the table.

There are two parts to the work involved in creating this feature plug-in:

• API method - we need to get the number of pages that are shown in the table so we know if we need to show or hide the paging control.
• Feature plug-in - creating the plug-in that will perform the check and show / hide of the paging control

Example

In the example below, note that the pagination control is initially shown. Now enter some text into the filtering field and the control will be removed when the results from the filter fit onto a single page.

Continue reading...

Tables are intrinsically complex, due to the number of options that can be used to customise them and the data that they show. Building an editing interface that reflects your table could be a time consuming prospect, but with Editor making tables editable is now super easy to do.

DataTables has always had a capable API, and Editor integrates tightly with that API to provide everything you need, including UI controls, to present an editing interface to your end users. Building on five years of experience of working with dynamic DataTables enhanced tables, Editor is designed to fit in with almost every design and can be readily extended through the use of field and display plug-ins.

Continue reading...

The form that this debugger takes is as a bookmarklet. When run on a web-page that uses DataTables, the bookmarklet will gather information about the tables on the page and upload that information to the DataTables server.

When complete, you will be given a unique six character identification code for your newly created debug record, which can be used to view the information about your table. This information view will show a summary of information about the tables and software on your web-page - allowing easy access to the configuration of the table. For example: this debug record shows the information gathered from the table on the DataTables.net home page.

To get started with using the debugger, please visit the debugger home page:

• DataTables debugger

Continue reading...

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

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

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

The most significant addition to the site is the new DataTables Live site, which is built upon JS Bin. JS Bin allows live editing, testing and sharing of code on the site, which I've tailored for DataTables (for example press 'esc' to get code-completion hints, including DataTables API methods and initialisation options).

I'll increasingly be using the Live site myself when answering support questions in the forums. I would also ask that if you have a question about a DataTables setup or a bug to report, please set up a Live example as it will make the whole process much quicker!

You will also be able to see that I've updated the syntax highlighter used on this site, and the DataTables examples. The code blocks now all have a "Edit in JS Bin" link, which when clicked on will import the code into the DataTables Live site, allowing you to quickly get an example running. It should be noted that not all code examples will work in JS Bin off the bat - they might need some custom setup, but the majority should work immediately.

Other updates to the site include automatic linking of API and initialisation options in forum posts to the DataTables reference, making reference that little bit easier. There are also a few other tidy ups in the documentation and software behind the site.

As for myself, I now join the ranks of full-time freelancers. If you would like to work with me on any projects you have (involving DataTables integration or otherwise), please do get in touch!

Exciting times indeed!

Continue reading...

Continue reading...

You will notice that in the main site navigation there is now a Support / Buy button which will take you to a very simple form. Here you can select a DataTables support package, where each package is a given amount of support time, and then purchase the package through Google Checkout or PayPal. Support is still conducted through messages in the forum, and with the new forums it is possible to send either public or private support requests to me (perfect if, for example, you are working with confidential information).

In the information bar on the left of the forums page you will now see a box which links to the new support purchase page. When you purchase a support package this will change into a box showing how much support time you have available on your account (shown in the image on the right). The support time on your account will be updated as I work through your support requests.

Continue reading...

Tables are the perfect solution to show summary data which can be readily tabulated. However, often you will want to provide the end user of your web-site / app with the ability to drill down into the data in the table and show more detailed information. This can help clean up the interface and stop the end user being overwhelmed by information and give them more control.

DataTables provides two API methods to attach a details row to a parent in the table; fnOpen to show the extra data and its reciprocal fnClose to remove it. The data which is shown in the details row can be more or less whatever you wish as fnOpen will accept a DOM node or HTML string. In this example I'll show an inner table being used which is animated open and closed.

This example also shows the new mDataProp option included in DataTables 1.8 in action. How you the data for the details row is obtained can be done in a number of different ways, including Ajax or a DOM source. In this example through the use of mDataProp and DataTables consuming a JSON object for the table display, we can use the original object that is given to the table, showing information that is not in the default view of the table.

Continue reading...

The basic aim of Scroller is to have a vertically scrolling table, where the scrollbar for the table directly represents the position of the visible data in the full data set. This can of course already be achieved with DataTables as shown in the y-scrolling example, however, this method requires every single row to be created and drawn in the DOM. When considering many thousands of rows, this can ask a lot of the browser's Javascript engine. One possible solution which is built into DataTables is infinite scrolling, but here the scrollbar doesn't accurately represent the full data set. Thus Scroller is presented to provide the main goal, while making use of the new features in DataTables 1.8 to maintain the performance of the table.

An example of a DataTable with 2'500 rows being loaded from an Ajax source is shown below:

Development of Scroller was sponsored by John Wiley & Sons, Inc. - a huge thank you to them for their support of the DataTables project!

Continue reading...

Continue reading...

There are a million and one different ways to present the editing interface for this table, and which method you wish you use will depend on how you want it to interface with the rest of your web-site / app. You might wish to have a lightbox editing form floating on top of the table, or you could use a cell at a time approach using a library like jEditable. Typically I've shied away from providing an editing plug-in for DataTables because how it should be implemented will vary significantly from situation to situation and one size does not fit all here.

Fortunately with DataTables is very easy to create a CRUD interface which is tailored to your specific setup using the DataTables API. In this example I will show how to create an interface which provides inline editing of a whole row. What we end up with at the end of this tutorial is shown below:

Continue reading...

Fortunately styling a DataTables table is actually a relatively simple prospect and I'll show how to build the style up so that your table looks like the one shown below in this post. In this post I'll use only very basic initialisation of DataTables and concentrate on just nice CSS styling! I'll be building on the fine work of Inayaili de Leon for this example, and we will end up with a table which looks like this:

Continue reading...