I use the JQuery Datatables plugin , and would like to export the data (CSV, Excel, PDF ...) of the tables through custom buttons , instead of the buttons that the plugin itself offers, is it possible?
In the red rectangle, the buttons of the Datatables itself. I would like to add a button next to the buttons that are in the blue rectangle and call some method to export the table data.
CodethatmakesthenativeDatatablesbuttonsappear:
<divclass="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 btn-acao-grid">
<button class="btn btn-success btn-sm margin-btn" id="add">
<span><i class="icon wb-plus-circle" aria-hidden="true"></i> Adicionar</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 btn-acao-grid">
<button type="submit" class="btn btn-default btn-sm margin-btn">
<span><i class="icon wb-pencil" aria-hidden="true"></i> Alterar</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 btn-acao-grid">
<button type="submit" class="btn btn-danger btn-sm margin-btn" >
<span><i class="icon wb-minus-circle" aria-hidden="true"></i> Remover</span>
</button>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-6 btn-acao-grid pesq-refresh">
<button type="submit" class="btn btn-dark btn-sm margin-btn" id="btn-pesquisa">
<span><i class="icon wb-search" aria-hidden="true"></i> </span>
</button>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-6 btn-acao-grid pesq-refresh" >
<button type="submit" class="btn btn-dark btn-sm margin-btn" id="btn-refresh" >
<span><i class="icon wb-reload" aria-hidden="true"></i> </span>
</button>
</div>
</div>
<table id="example" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>$205,500</td>
</tr>
<tr>
<td></td>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>$163,000</td>
</tr>
</tbody>
</table>
<script>
$("#example").DataTable( {
dom: "Bfrtip",
buttons: [
"copy", "csv", "excel", "pdf", "print"
],
"scrollY": 400,
"scrollX": true,
"searching": false,
columnDefs:[{
orderable: false,
className: "select-checkbox",
targets: 0
}],
select: {
style: "os",
selector: "td:first-child"
},
order: [
[ 1, "asc" ]
]
});
</script>
I would like to export data from this Datatables not by its native buttons, but by a button, which could be added above the grid with the export option.
Does Datatables have some function to export your data, which could be called through the buttons above the grid (in blue)?