Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js">
    </script>
    <link rel="stylesheet" type="text/css"
        href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" type="text/css"
        href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" />

    <script type="text/javascript">
        $(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>
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <div style="width: 800px; border: 1px solid black; padding: 3px">
            <table id="datatable">
                <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>1</td>
                        <td>Montería</td>
                        <td>Colombia</td>
                        <td>South America</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Birmingham</td>
                        <td>United Kingdom</td>
                        <td>Europe</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Bangalore</td>
                        <td>India</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Tokyo</td>
                        <td>Japan</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Kuala Lumpur</td>
                        <td>Malaysia</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Rio de Janeiro</td>
                        <td>Brazil</td>
                        <td>South America</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>Ipoh</td>
                        <td>Malaysia</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Tawau</td>
                        <td>Malaysia</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>Hiroshima</td>
                        <td>Japan</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td>Cannes</td>
                        <td>France</td>
                        <td>Europe</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td>London</td>
                        <td>United Kingdom</td>
                        <td>Europe</td>
                    </tr>
                    <tr>
                        <td>12</td>
                        <td>Saku</td>
                        <td>Japan</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>13</td>
                        <td>Nice</td>
                        <td>France</td>
                        <td>Europe</td>
                    </tr>

                    <tr>
                        <td>14</td>
                        <td>Manchester</td>
                        <td>United Kingdom</td>
                        <td>Europe</td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>Salvador</td>
                        <td>Brazil</td>
                        <td>South America</td>
                    </tr>

                    <tr>
                        <td>16</td>
                        <td>Cali</td>
                        <td>Colombia</td>
                        <td>South America</td>
                    </tr>
                    <tr>
                        <td>17</td>
                        <td>Chennai</td>
                        <td>India</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>18</td>
                        <td>Brasília</td>
                        <td>Brazil</td>
                        <td>South America</td>
                    </tr>
                    <tr>
                        <td>19</td>
                        <td>Mumbai</td>
                        <td>India</td>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>20</td>
                        <td>Paris</td>
                        <td>France</td>
                        <td>Europe</td>
                    </tr>
                    <tr>
                        <td>21</td>
                        <td>Bello</td>
                        <td>Colombia</td>
                        <td>South America</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>

jQuery tutorial for beginners

4 comments:

  1. Thanks for sharing excellent information. Your website is so cool. I’m impressed by the details that you have on this blog.

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

    ReplyDelete
  3. Hi Venkat,
    Is there any way to modify the width of PDF.

    ReplyDelete
  4. 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?

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.