Saturday, August 6, 2011

DataTables work: Rotating a datatable (pivot)

I have been working with DataTables for 2 months or so now, and it's a very versatile tool.  It is also very flexible about allowing plug-in development for API functions and features to affect the core.  I haven't written a bona-fide plug-in in the correct manner yet (see this recent blog post that describes "how to":

I have, however, written some fun code that will soon be made into a plug-in, that takes a DataTable and pivots around it's diagonal axis so rows become columns and columns become rows.  see:

What I'm also currently working on is a lot more ambitious a project: a wizard / visual development tool for setting up DataTable.  Design goals will include the following phases/functions:

1) data - allow import of data in csv, json, html table, or database table.  convert to array, json, html, or sql.
2) objects - allow specifying settings for various objects (init, columns, etc) through a properties window.
3) css - allow real-time editing of css elements
4) dom features - allow real-time editing of sDom / aanFeatures
5) plugins - select and add plug ins desired
6) download a packaged zip of the elements selected in the above steps

Today I've worked on step 1, using the tiny_mce editor to allow creation of table code or pasting table html.  I've written a plug-in to convert the table to JSON and will need to write the inverse function.  The JSON created will probably be the intermediate format used in step 1 for the conversions.  My JSON is a bit more padded than JSON required for aaData or sAjaxSource for DataTables because it keeps data on the THEAD and TFOOT elements of a table and specifies both an aaData array of arrays of row data as well as an aoData object version of the same data.

I'll try to keep this blog updated occassionally with progress.

Edit: I have packaged the rotation code as a plugin called Transpose and submitted it to Allan to post on the site.  Here's a blog post by Allan describing the plugin creation process.  Reading other plugins will help as well.


  1. I came across your datatables transpose blog and have a need to do the same thing. The link to the .zip plugin you posted is no longer available. Do you have this plugin available for download?


    jfobel (at)

  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me..I am a regular follower of your blog.
    Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India .
    or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India