javascript – How to create button with function to export DataTable to (.csv) in jQuery?

Question:

I have the following button:

$(document).ready(function() {
  $('#example').DataTable({
    "dom": 'T<"clear">lfrtip',
    "tableTools": {
      "sSwfPath": "/swf/copy_csv_xls_pdf.swf"
    }
  });
});
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
<link href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
<script src="http://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="btnExportar">Exportar</button>

<table id="example" class="display" cellspacing="0" width="100%">

  <thead>
    <tr>
      <th>Nome</th>
      <th>E-Mail</th>
      <th>Profissão</th>


    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>
        Nome
      </th>
      <th>
        E-Mail
      </th>
      <th>
        Profissão
      </th>



    </tr>
  </tfoot>

  <tbody>
    <td>Tiago Ferezin</td>
    <td>mail@email.com</td>
    <td>Programador</td>

  </tbody>
</table>

As we see in the code the function is not working, I don't know why, and I would like to associate this function with the export button so that when the user clicks on this button, the download window opens to download the DataTable content in *.csv , on the user's PC.

How is it resolved?

Answer:

Datatables has a File Export implementation that does what you need and has a specific topic for csv . For everything to work you have to import all the files listed below the example on the site. Here's a jsfiddle for you to test 🙂

Post Views: 1
Scroll to Top