On the DataTables blog you will find news, announcements and tutorials about DataTables and its suite of extensions. New posts are published monthly, with additional news items in between.

23rd Dec 2016

Sorting with absolute positioned data

The ordering of information in a DataTable is probably the aspect that I cover most in this blog (enums and dates for example, and more to come), but that is because it such a rich topic! DataTables is used in a wide range of applications from space telescope telemetry to amateur football leagues, so it needs to be able to cope with lots of different data types. DataTables core ships with just a basic set of data sorting functions (string, number, currency, percentage, ISO8601 dates) so, for anything outside of this range DataTables provides a sorting plug-in API that you can use to define your own sorting methods.

Typically with a sorting method you would have linear ordering, whereby the descending sort is the exact reverse of ascending, and everything is ordered by a simple comparison (numeric or character code points). This post is going to be a little different: I'll introduce a non-linear configurable sorting plug-in, whereby you can keep specific pieces of data at the top or the bottom of a column, regardless of the sorting direction and the value of that item.

An example is always worth a million words, so let's consider the following table:

Name Position Office Start date Salary
Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
Unknown Senior Javascript Developer Edinburgh 2012/03/29 TBC
Airi Satou Accountant Tokyo 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 2012/12/02 $372,000
Unknown Sales Assistant San Francisco 2012/08/06 TBC
Rhona Davidson Integration Specialist Tokyo 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 2009/09/15 Not available
Sonya Frost Software Engineer Edinburgh 2008/12/13 $103,600

In this case we have two columns where absolute ordering can be useful:

  • Name column where there are "Unknown" entries that should be shown at the top of the table.
  • Salary column where "TBC" should be shown at the top and "Not available" should be shown at the bottom.

If you alter the sorting that is applied to the table by clicking on the headers of those columns, you will be able to see that those items stay in position regardless of the sorting of the column. If sorting is applied to one of the other columns the rows will be sorted normally.

Continue reading...

16th Dec 2016

Editor 1.6

I'm very pleased to announce the release of Editor 1.6, the sixth major update to Editor in its 1.x series. It is a free upgrade to all existing license holders and adds a number of exciting new features that greatly increase Editor's capabilities, particularly on the client-side.

In this post I'll run through a summary of the new features in 1.6 and in future posts explore how we can utilise them to enhance the applications developed with Editor further.

Editor 1.6 can be downloaded from its download page as both a free trial if you haven't tried Editor out yet, or if you have a license, the fully licensed version will automatically be downloaded.

Continue reading...

16th Jun 2016

Dynamic enum sorting

Ordering of data is a fundamental aspect in any interactive table and it is core to DataTables' ability to let end users easily find the data they are looking for. DataTables has a number of built in ordering types for numbers, currency, dates and strings, but data is complex and it would be impossible for DataTables to define ordering options for all data sets. As such it provides a plug-in interface allowing you to define your own ordering rules for data.

In this post I will introduce a function that will dynamically create ordering and type detection plug-ins for an enumerated list (commonly shortened to enum).

This simple example table shows the use of the plug-in to order the priority column intuitively:

$.fn.dataTable.enum( [ 'High', 'Medium', 'Low' ] );
Project Name Priority
Skilled Drill High
Yellow Sleepy Uranium Low
Massive Tungsten Medium
Dusty Scissors High
Big Yard Low
Moving Backpack Low
Risky Cloud Medium

Continue reading...

Historic blog posts