Exporting table data as CSV (comma separated values)

Posted in Tutorials

In this tutorial, we will use the TableTools extension of DataTables jQuery plugin to export table data to a CSV (comma separated value) file.  This exported file is a text file with data in comma separated format which can be easily opened in Excel.

1. We will continue right off from our previous example where we simply showed how to use the DataTables jQuery plugin.  We’ll start with this HTML …

2. When you download DataTables jQuery plugin from DataTables.net, you will find the TableTools extension in the folder “extensions/TableTools”.    Note the version that you have downloaded.   You should match the DataTables CSS and JS with the same version that you have downloaded.  In our case, we have changed the CDN version (in the above screenshot) to 1.10.2 of DataTables to match the version of TableTools that we have downloaded.

3. At this point the above HTML should work without problems (but without the Export to CSV feature).  Copy the TableTools folder into the same directory as your HTML.  You can delete the “examples” subfolder within the TableTools folder if you like.

In the HTML, add the references to the TableTools CSS and TableTools JS after the usual DataTable references…

4.  Next we have to use the T option in DataTables’ dom parameter to tell DataTables to insert the TableTools toolbar in that location.

The dom parameter in DataTables is used to position the DataTables controls. The “T” is where the TableTools button will go in relation to the DOM. <“clear”> represents a div of class “clear” is to follow the TableTools.  With regards to “lfrtip”, the “l” represents the line changing element. “f” is the filtering element.  “r” is “processing”.  “t” is the table itself.  “i” is information.  And “p” is the pagination elements.

I know, the DOM syntax here is a bit obscure.

And we have to specify what buttons to show up with the defaults.aButtons (see above).

5. If your Javascript console may say that it can not find the SWF file.   We need to set the path to the SWF by adding the sSwfPath property (as shown above).

6.  If you run it now, you see that it works …

Clicking the CSV button will export the table data into a csv file that you can save onto your local drive.   Clicking the PDF button will generate a PDF file to save to disk.  Clicking Copy will get the table data of all row (not just the 10 rows shown in the first page) into the operating system clipboard which you can then paste into Excel or other document.  The “Print” button gets rids of the Data Table controls so that is is printer-friendly.  Just press the Esc key when done printing to go back to normal.

7.  If you want to customize the text of the button, you can do so like this …

If you customize the button text, then you don’t need the line about defaults.aButtons.

Table Tools reference can be found here.

 

 

 

---