How To Export HTML Table To PDF And Excel In jQuery Datatable

Posted By : Rajan Rawat | 14-Mar-2018

Datatables

DataTables is a plug-in for jQuery and it has the option of customizable with the huge range.The below example will show you the basics of the dataTables and also tell you about the how you can customize the table and passing of object that you want to add or delete in the table

whenever exporting the data from the table it can be the important part of an application. extension of buttons for dataTables will provide three types of plug-in that give you overlapping functionality for export of data

lets see how to use it. It is very easy to implement the functionality when it comes to export the jQuery dataTables to pdf or excel file, i am using a simple HTML and jQuery plug-ins have a look on below codes

In this whole blog, we will walk through some features and implement them in realtime tables. we are using a few tools of developers
that are given below

jQuery: it is a small library of JavaScript and a rich features that enable the manipulation of DOM, handling events, animations and the last ajax

DataTables: it is the jQuery plug-in which is the new enhanced version of tables and it comes with so many controls

Bootstrap: it is a framework of frontend and it is basically used for responsiveness and mobile projects on the web

 

 

HTML CODE


 
Name Position Office Age Start date Salary
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500

 

JS CODE 

                	$(document).ready(function() {
    $('#exampletable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );
        

CSS References


 

About Author

Author Image
Rajan Rawat

Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.

Request for Proposal

Name is required

Comment is required

Sending message..