DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on â€ĸ Originally published at techsolutionstuff.com

4 2

Laravel 8 Export Buttons In Datatables Example

In this tutorial I will give you example of laravel 8 export buttons in datatables example. If you want to export data in excel, pdf or csv file format in datatable then you have to add export button in your datatable. So, here I am show you how to add export button in datatable using jquery or how to enable export button in datatable.

Datatables provides datatable buttons plugin for add export buttons in datatable using jquery. After adding of export button, you can easily export data to CSV, Excel and PDF file also you can copy all datatable data in html format.

So, let's see how to add export button in datatable using jquery.

You need to add below javascript file cdn to add export button in datatable.

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js
https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js
Enter fullscreen mode Exit fullscreen mode

And also add following CSS library files are loaded for use in this example to provide the styling of the table.

https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css
Enter fullscreen mode Exit fullscreen mode

Add below javascript code in your script tag.

$(document).ready(function() {
    $('#export_example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
} );
Enter fullscreen mode Exit fullscreen mode

You might also like :

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

If this post resonated with you, feel free to hit ❤ī¸ or leave a quick comment to share your thoughts!

Okay