Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

12 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
  5. 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?

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

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

    ReplyDelete
  8. Hi,
    I have problem with export to excel is DataTable Hyperlinks are not preserving in excel.

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

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

    ReplyDelete
  11. I have copied all code as it is but no buttons are visible, print , csv PDF, any.. Please help me .

    ReplyDelete
    Replies
    1. Shraddha same problem here, have solved this problem

      Delete

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