Export Datatables

2

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

    
asked by anonymous 05.07.2016 / 20:17

1 answer

1
  

Does Datatables have some function to export your data, which could be called through the buttons above the grid (in blue)?

In summary, yes, but you can have to create your own buttons if the function you want does not exist .

If the idea is to control the Data Table via external buttons, there are a number of events you can use to create buttons anywhere on the page and trigger commands to the Data Table using JavaScript.

    
11.07.2016 / 17:18