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.

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

1
2
3
4
5
6
7
8
$(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.

01
02
03
04
05
06
07
08
09
10
11
$(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.

01
02
03
04
05
06
07
08
09
10
11
12
$(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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
$(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.