DEV Community

loading...

Datatable Custom Export Button Example

Websolutionstuff
I am Laravel Developer. I have good knowledge of JavaScript, JQuery, Bootstrap and REST API.
Originally published at websolutionstuff.com ・1 min read

Hello Guys,

In this tutorial we will see how to add datatable custom export button example. datatable provide inbuilt button functionality and also provide html5 buttons so, as per your requirement you can add datatable export button in your table.

Datatable also provide many customization functionality. so, in this example we will see how to add datatable export button outside table. many times we required this types of requirements so today I will give you example of datatable export button outside table.

So, let's start to implement datatable custom export button example.


Read More : PHP Array Functions With Example


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

buttons().containers()

using this function you can add buttons in any where outside of the datatable.

In this step first initialize datatable

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

Read More : Laravel 8 Autocomplete Search from Database


after that using datatable button function we can add button outside table like 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 : Laravel 8 Import Export CSV/EXCEL File Example


Thanks for the reading...!!

Discussion (0)