DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

Laravel Custom Export Button In Datatable

In this article, we will see laravel custom export button in datatable. Datatable provides inbuilt button functionality and also provides html5 buttons. So, as per your requirement, you can add datatable export button in your table. Datatable also provides many customization functionalities. So, in this example, we will see how to add datatable export button outside the table. many times we required these types of requirements.

So, let's see how to add a datatable custom export button example, datatable custom export button in laravel 8, datatable export button outside table, laravel 8 export button, custom button in datatable, laravel 8 custom export button

In your HTML file add div with id or class out of table like below code :

<div id="buttons"></div>
<table id="example" class="table">
...
</table>
Enter fullscreen mode Exit fullscreen mode

Read Also : PHP Array Functions With Example


buttons().containers()

Using buttons().containers() function you can add buttons anywhere outside of the datatable.

In this step, we initialize the datatable.

var table = $('#example').DataTable();
Enter fullscreen mode Exit fullscreen mode

After that, using the datatable button function we can add a button outside the table like the below code.

var buttons = new $.fn.dataTable.Buttons(table, {
     buttons: [
       'copyHtml5',
       'excelHtml5',
       'csvHtml5',
       'pdfHtml5'
    ]
}).container().appendTo($('#buttons'));
Enter fullscreen mode Exit fullscreen mode

Read Also : Datatable Server Side Custom Search/Filter In Laravel


Example :

Directly apply buttons to datatable like below code :

So, both ways to you can implement a custom export button outside datatable.

var table = $('#example').DataTable({
    buttons: [
       'copyHtml5',
       'excelHtml5',
       'csvHtml5',
       'pdfHtml5'
    ]
});

table.buttons().container().appendTo($('#buttons'))
Enter fullscreen mode Exit fullscreen mode

You might also like :

Top comments (0)