How to create a function button to export Datatable to (.csv) in jQuery?

Asked

Viewed 1,325 times

3

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" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet" />
<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" rel="stylesheet" />
<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>[email protected]</td>
    <td>Programador</td>

  </tbody>
</table>

As we see in the code the function is not working, I do not know the reason, and I would like to associate this function to the export button so that when the user clicks this button, already opens the download window to download in *.csv, the contents of Datatable, in the user’s PC.

How do you resolve?

javascript jquery

1 answer

2


Datatables has an implementation of File Export that does what you need and has a specific topic for csv. In order for everything to work you have to import all the files listed just below the example on the site. Here is a jsfiddle for you to test :)

  • In jsfiddle it worked, but after making all the imports and everything and putting according to what is in jsfiddle posted, also did not solve

  • @Tiagoferezin , opa .. which version of Datatables are you using ? and it is very important to check the javascript import sequence :)

  • @Tiagoferezin if you want to download with the imported references, I made available to you here hope it helps :)

  • spun but it generated a boot, I wanted to put this function inside my button I already customized, got how.? If not, would there be another way to do this? even if it is on the Server side with Java itself.

  • And worse than generating the boot, it has disfigured all my Datatables, and now?

  • 1

    @Tiagoferezin, it is only possible to use the buttons generated by the library, because the buttons "Copy", "CSV", "Excel" and "PDF" were implemented using Adobe Flash. The problem of disfigurement must be some conflict with the css files, just remove the new ones and add the old ones :)

Show 1 more comment

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.