Datatable TableTools Part:7

This post is 7th part of a series called Getting Started with Datatable 1.10 .

  1. DataTable demo (Server side) in Php,Mysql and Ajax
  2. DataTable (Server side) Custom Column Search
  3. Datatable Scroller (Server Side)
  4. DataTable Responsive (Server side)
  5. Datatable Custom Loader
  6. Datatable Colvis (Column Visibility Customization)
  7. DataTable Table tools
  8. DataTable Custom Search By Tags Input (Server side)
  9. DataTable Search By Datepicker (Server side)
  10. Datatable Bulk Delete (Server Side)
  11. Datatable Page Resize (Server Side)

In this post I will show how to extend datatable’s functionalty using TableTools extension. There are some cool features you can found as below:

  • Save data as CSV, XLS or PDF
  • Print table data
  • Row selection
  • Copy to clipboard

Before proceed please checkout the demo and make sure you have flash installed in your computer. Table tool has this dependency. Later I will show you how to set up SWF path for flash supports.

For tabletools we need to add two assets along with other assets.


<link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
<script type="text/javascript" language="javascript" src="js/dataTables.tableTools.js"></script>

Initialisation

You can initialize TableTools by simply adding the T in dom option.


$(document).ready(function() {
	var dataTable =  $('#employee-grid').DataTable( {
	dom: 'T<"clear">lfrtip', //initialize tableTools
	processing: true,
	serverSide: true,
	ajax: "employee-grid-data.php", // json datasource
	} );
});

Set SWF path

We can set SWF path in datatable simply by “sSwfPath” option.


$(document).ready(function() {
	var dataTable =  $('#employee-grid').DataTable( {
	dom: 'T<"clear">lfrtip', //initialize tableTools
	"tableTools": {
   	   	"sSwfPath": "swf/copy_csv_xls_pdf.swf",  // set swf path
	},
	processing: true,
	serverSide: true,
	ajax: "employee-grid-data.php", // json datasource
	} );
});

Enable row selection

“sRowSelect” option let you customize table’s
row selection by “single”, “multi” or “os” type.


$(document).ready(function() {
	var dataTable =  $('#employee-grid').DataTable( {
	dom: 'T<"clear">lfrtip', //initialize tableTools
	"tableTools": {
   	   	"sSwfPath": "swf/copy_csv_xls_pdf.swf",  // set swf path
		"sRowSelect": "multi",
	},
	processing: true,
	serverSide: true,
	ajax: "employee-grid-data.php", // json datasource
	} );
});

Customize buttons

There are few buttons available in tabletools about various table operation like “select all” , “CSV export” and so many. you can found full list here.

In “aButtons” option you have to include all buttons you want.


$(document).ready(function() {
	var dataTable =  $('#employee-grid').DataTable( {
	dom: 'T<"clear">lfrtip', //initialize tableTools
	"tableTools": {
   	   	"sSwfPath": "swf/copy_csv_xls_pdf.swf",  // set swf path
		"sRowSelect": "multi",
		"aButtons": [
			"select_all", 
			"select_none",
			{
				"sExtends":    "collection",
				"sButtonText": "Export",
				"aButtons":    [ "csv", "xls", "pdf","print" ]
			}
		]
	},
	processing: true,
	serverSide: true,
	ajax: "employee-grid-data.php", // json datasource
	} );
});

here I have added three buttons basically. Select all, Deselect all and Export. Export buttons is collection of Csv, Xls, Pdf and Print button. I have added collectio using “sExtends” option. Also I have changed default button text to “Export” using “sButtonText” option.

Server side code remain same as my previous post. If you have any issue with server side integration, please refer my first post of this series.

Download fullcode from below and comment with your queries.

DownloadDemo


  • chiaki25

    Hi Arkaprava,
    Thanks for the great tutorial. I used your code and it works fine but when i use tabletools to export to pdf/csv/xls only the active page data gets exported. Is there any way to exports all the rows not just the rows in active page ?

    Thanks.

    • Its not possible in current tabletools plugins. this plugin does not fetch data from server side, It fetches from current dom which is rendered by filtered data parameters through ajax,

  • Simon Montano

    tabletools is now retired software and replaced by the Buttons and Select extensions which offers significant improvements and API integration with the rest of DataTables and the other extensions.

    It is strongly recommended that you upgrade if possible to Buttons and Select, and to not use TableTools in any new projects.https://github.com/DataTables/TableTools

  • CLAUDIO RODRIGUEZ ORE

    there is an error in generating printable, this point is helpful, others not so many, but the paging is not very useful

  • Sayma

    hey the collection is not working, it shows only the print button and it also does not work .

  • Sayma

    can anyone tell me why the collection only shows the print button, and not any other

  • Krithe Srivastava

    code not working