Can anyone please provide me complete working example for data table with export options.

rajeshveeru · August 2015

can anyone please share a git hub link for data tables with export option

allan · August 2015

Allan

rajeshveeru · August 2015

Hi Allan,

i used Javascript sourced data data table and i want to export this table too...
below you can find my code i see all export option except print nothing works

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/tmstyle.css">
    <script type="text/javascript" src="js/tm-actuality.js"></script>
    <script type="text/javascript"
 src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
    <script type="text/javascript"
 src="http://www.datatables.net/release-datatables/media/js/jquery.js"></script>
 <script type="text/javascript"
 src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
 <script type="text/javascript"
 src="http://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
    <link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.min.css">
    <link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
    <link rel="stylesheet" type="text/css" href="css/tmtable.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/tmtable1.css">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="http://www.datatables.net/release-datatables/media/css/jquery.dataTables.css" rel="stylesheet">
    <link href="http://www.datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
 href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="js/table1data-report.js"></script>
    <script type="text/javascript" src="js/dataTables.tableTools.js"></script>
    <script type="text/javascript" src="src/dataTables.tableTools.js"></script>
    <script type="text/javascript" src="src/TableTools.js"></script>
    <script type="text/javascript" src="src/ZeroClipboard.js"></script>
    <script type="text/javascript" src="js/table1data2.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script src="js/highcharts.js"></script>
    <script src="js/highcharts-3d.js"></script>

</head>
<body>

</body>
</html>

and JS:

var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
['Webkit','Safari 1.2','OSX.3','125.5','A'],
['Webkit','Safari 1.3','OSX.3','312.8','A'],
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
['Webkit','S60','S60','413','A'],
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
['Presto','Opera for Wii','Wii','-','A'],
['Presto','Nokia N800','N800','-','A'],
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
['Misc','NetFront 3.1','Embedded devices','-','C'],
['Misc','NetFront 3.4','Embedded devices','-','A'],
['Misc','Dillo 0.8','Embedded devices','-','X'],
['Misc','Links','Text only','-','X'],
['Misc','Lynx','Text only','-','X'],
['Misc','IE Mobile','Windows Mobile 6','-','C'],
['Misc','PSP browser','PSP','-','C'],
['Other browsers','All others','-','-','U']
];

$(document).ready(function() {
$('#demo').html( '

' );

$('#example').dataTable( {
    "data": dataSet,
    "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    "columns": [
        { "title": "Engine" },
        { "title": "Browser" },
        { "title": "Platform" },
        { "title": "Version", "class": "center" },
        { "title": "Grade", "class": "center" }
    ],
    "dom": 'T<"clear">lfrtip',
    "tableTools": {
        "sSwfPath": "../swf/copy_csv_xls_pdf.swf"
    }
} );

} );

rajeshveeru · August 2015

I tried with multiple path for swf file nothing works ?Please let me know if i missed anything.

tangerine · August 2015

Your HTML has four references to tableTools.js. Any reason?

rajeshveeru · August 2015

No i tried by giving direct link and coping JS locally and missed to take out references but is that the reason for table not getting exported ? please help me with this right now i am using direct link to get tabletools.js

allan · August 2015

i see all export option except print nothing works

That suggests there is an issue with Flash - likely the sSwfPath parameter isn't loading the movie file. However, without a link to the page (as required in the forum rules) it is impossible for me to say for sure. Please give us a link to the page.

Allan

rajeshveeru · August 2015

Hi Allan and Tangerine,

I am now trying to export a test datatable even now i have same problem below is my code and i have swf file in same directory (no other JS in this directory), so now my question is am i missing any other files or plugin for export functionality to work ?

Please answer and i shared entire directory under below link for more info.

(https://www.dropbox.com/sh/vut5ywsmmk9pyvw/AAAXsyBQ7wqpL6RchCYu_uqWa?dl=0)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DATA Tables</title>
<script type="text/javascript" src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script type="text/javascript" src="http://datatables.net/examples/resources/syntax/shCore.js"></script>
<script type="text/javascript" src="http://datatables.net/examples/resources/demo.js"></script>

<link rel="stylesheet" type="text/css" href="http://datatables.net/release-datatables/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<script type="text/javascript" language="javascript" class="init">


$(document).ready(function() {
    $('#example').DataTable( {
        "dom": 'T<"clear">lfrtip',
        
        "tableTools": {
            "sSwfPath": "http://datatables.net/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
            //"sSwfPath": "copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "print",
                {
                    "sExtends":    "collection",
                    "sButtonText": "Save",
                    "aButtons":    [ "csv", "xls", "pdf" ]
                }
            ]
        }
    } );
} );


    </script>
</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
 
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
 
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
.
.
.

    </tbody>
</table>
</body>
</html>

allan · August 2015

Can you please provide a link to the page so I can debug it live. I don't see the issue with what you have posted above, which is why I have asked for a link previously. I cannot debug this just from your source code in this case.

Allan

Can anyone please provide me complete working example for data table with export options.

Can anyone please provide me complete working example for data table with export options.

Answers

Howdy, Stranger!

Categories

DataTables

Can anyone please provide me complete working example for data table with export options.

Can anyone please provide me complete working example for data table with export options.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables