Sql server, .net and c# video tutorial: jQuery datatables export to pdf

Suggested Videos
Part 110 - asp.net generic handler return json
Part 111 - jQuery datatables server-side processing example asp.net
Part 112 - jQuery datatables server-side processing using asp.net web services

In this video we will discuss
1. How to export jQuery datatables data to excel, PDF, CSV
2. How to copy jQuery datatables data to Clipboard
3. How to print

jQuery datatables export to pdf

To be able to export data, copy to clipborad or print you should use TableTools plugin for DataTables.

Grab the TableTools plugin CSS and JavaScript CDN links from the following URL
https://www.datatables.net/download/index

In addition to the CSS and JavaScript files you also need TableTools Flash SWF file. You can get the TableTools Flash SWF file CDN link from the following URL. You will find 2 different SWF files. The only difference between them is that one of them provides the ability to save PDF files while the other doesn't. The trade off is that the PDF capable file is significantly larger in size (56K v 2K).
https://cdn.datatables.net/tabletools

JavaScript References required on the page
JQuery
DataTables
TableTools

CSS References required on the page
DataTables
TableTools

You also need to set the sSwfPath TableTools option, if you aren't using the same directory structure as the TableTools package.

Table Tools Button options documentation
https://www.datatables.net/extensions/tabletools/button_options

Complete Example :

<!DOCTYPE html>

</script>

href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />

href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" />

$(document).ready(function () {

var table = $('#datatable').dataTable();

var tableTools = new $.fn.dataTable.TableTools(table, {

'aButtons': [

{

'sExtends': 'xls',

'sButtonText': 'Save to Excel',

'sFileName': 'Data.xls'

{

'sExtends': 'print',

'bShowAll': true,

{

'sExtends': 'pdf',

'bFooter': false

'copy',

'csv'

'sSwfPath': '//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf'

});

$(tableTools.fnContainer()).insertBefore('#datatable_wrapper');

});

</script>

</head>

<thead>

<tr>

<th>ID

</th>

<th>City

</th>

<th>Country

</th>

<th>Continent

</th>

</tr>

</thead>

<tfoot>

<tr>

<th>ID

</th>

<th>City

</th>

<th>Country

</th>

<th>Continent

</th>

</tr>

</tfoot>

<tbody>

<tr>

<td>Montería</td>

<td>Colombia</td>

<td>South America</td>

</tr>

<tr>

<td>Birmingham</td>

<td>United Kingdom</td>

<td>Europe</td>

</tr>

<tr>

<td>Bangalore</td>

<td>India</td>

</tr>

<tr>

<td>Tokyo</td>

<td>Japan</td>

</tr>

<tr>

<td>Kuala Lumpur</td>

<td>Malaysia</td>

</tr>

<tr>

<td>Rio de Janeiro</td>

<td>Brazil</td>

<td>South America</td>

</tr>

<tr>

<td>Malaysia</td>

</tr>

<tr>

<td>Tawau</td>

<td>Malaysia</td>

</tr>

<tr>

<td>Hiroshima</td>

<td>Japan</td>

</tr>

<tr>

<td>Cannes</td>

<td>France</td>

<td>Europe</td>

</tr>

<tr>

<td>London</td>

<td>United Kingdom</td>

<td>Europe</td>

</tr>

<tr>

<td>Japan</td>

</tr>

<tr>

<td>France</td>

<td>Europe</td>

</tr>

<tr>

<td>Manchester</td>

<td>United Kingdom</td>

<td>Europe</td>

</tr>

<tr>

<td>Salvador</td>

<td>Brazil</td>

<td>South America</td>

</tr>

<tr>

<td>Colombia</td>

<td>South America</td>

</tr>

<tr>

<td>Chennai</td>

<td>India</td>

</tr>

<tr>

<td>Brasília</td>

<td>Brazil</td>

<td>South America</td>

</tr>

<tr>

<td>Mumbai</td>

<td>India</td>

</tr>

<tr>

<td>Paris</td>

<td>France</td>

<td>Europe</td>

</tr>

<tr>

<td>Bello</td>

<td>Colombia</td>

<td>South America</td>

</tr>

</tbody>

</table>

</div>

</form>

</body>

</html>

12 comments:

Hire SSRS DeveloperAugust 10, 2015 at 11:50 PM
Thanks for sharing excellent information. Your website is so cool. I’m impressed by the details that you have on this blog.
HarryAugust 11, 2015 at 3:07 AM
This application works, but when I used CSV, XLS and PDF I see in the dialogbox near Save as type All files (*.*).

But when I save it's converted to the expected files.

I alse tried to used the 'bShowAll': false option for PDF, CSV, XLS and Copy but they don't work. They all give 21 rows back.
AnonymousJanuary 7, 2016 at 10:54 PM
Hi Venkat,
Is there any way to modify the width of PDF.
AnonymousAugust 23, 2016 at 1:45 AM
Hi Venkat,
The example is working properly only in chrome .When I am trying to browse using internet explorer or Mozilla,i am not getting any export buttons except for print button.Is it that the following solution works only in chrome?
Marcelo BohnJuly 3, 2017 at 11:49 AM
Great job. But I have a problem: using JSON to populate DataTable with Ajax, see:
var table = $('#example').DataTable( {
"ajax": "file.json", ...

How to adapt your solution in this case? Some tip?
AnonymousApril 21, 2018 at 12:18 AM
i am using jquery datatables aspx page in two text box to print from date to date record show in my reports. i have some issues how to solved this plz give me suggetions.

RockApril 21, 2018 at 2:58 AM
hi venkat sir,
i am using jquery datatables aspx page in two text box to print from date to date record show in my reports. i have some issues how to solved this plz give me suggetions.

KRISHNA SHEJULMay 28, 2018 at 10:57 PM
Hi,
I have problem with export to excel is DataTable Hyperlinks are not preserving in excel.
DhanushAugust 16, 2018 at 9:51 PM
I am getting only the print functionality .. but all I need is pdf functionality to be implemented on my page .. the container shows only print .. help me ..
Hemant K YadavNovember 12, 2018 at 9:01 AM
In my data table column contain image also so when I extracting data from jquery data table image will not extracted from there only text will be extracted well.
ShraddhaMarch 25, 2020 at 9:56 PM
I have copied all code as it is but no buttons are visible, print , csv PDF, any.. Please help me .

It would be great if you can help share these free resources