Welcome folks today in this blog post we will be rendering html tables with sorting and filtering such as pagination and export it to pdf,csv and excel files.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DataTables Table Editor</title> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"> </head> <body> <table id="myTable" class="display"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>30</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>25</td> <td>Female</td> </tr> </tbody> </table> <button id="export-csv-btn">Export to CSV</button> <button id="export-excel-btn">Export to Excel</button> <button id="export-pdf-btn">Export to PDF</button> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script> </body> <script> $(document).ready(function() { $('#myTable').DataTable({ dom: 'Bfrtip', buttons: [ 'csv', 'excel', 'pdf', 'print' ] }); $('#export-csv-btn').click(function() { $('#myTable').DataTable().button('csv').trigger(); }); $('#export-excel-btn').click(function() { $('#myTable').DataTable().button('excel').trigger(); }); $('#export-pdf-btn').click(function() { $('#myTable').DataTable().button('pdf').trigger(); }); }); </script> </html> |
