2
I use the plugin Jquery Datatables, 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, will it be possible to?
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 table data.
Code that makes native Datatables buttons appear:
<div class="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 the data of this Datatables not by its native buttons, but by a button, which could be added above the grid with the export option.
Datatables has some function to export your data, which could be called through the buttons above the grid (in blue)?
Carlos, your question is very wide-ranging, and I need to show you some of your code, how did you try to solve this so we could help you? Take the Tour and read the Soft Help here, then edit your question detailing more and being clearer and objective. Welcome!
– Leo
I’m new here. I added the codes
– Carlos Eduardo Scheffer
@Carloseduardoscheffer before a look here http://answall.com/tour. if you haven’t already seen it!
– Marcelo Diniz
I just want to know if Datatables has any function to export your data, but it can be called through external buttons, from my own code. Is it possible or not?
– Carlos Eduardo Scheffer