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>

 

 

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

In this step, we initialize the datatable.

var table = $('#example').DataTable();

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'));

 

 

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'))

 

---

You might also like :

• Read Also : Pagination Example In Laravel 7/8
• Read Also : Laravel 8 CRUD Operation Example
• Read Also : Laravel 8 Yajra Datatable Example Tutorial
• Read Also : Laravel 8 Remove/Hide Columns While Export Data In Datatables