scottpham / tabletop-to-datatables

Creates a bootstrapified interactive table from a google spreadhseet. An update to Chris Keller's very useful tabletop to datatables template.
http://scottpham.github.io/tabletop-to-datatables/
43 stars 21 forks source link

Adding file export buttons #7

Open camilomorenokuratomi opened 5 years ago

camilomorenokuratomi commented 5 years ago

Hi,

I'm a journalist (not a dev), and I would like to ask you if it's currently possible to add file export buttons to tabletop-to-datatables as shown in the datatables documentation. I tried to initilize the options on my js file (after importing the required librairies to the html file), but couldn't make it work.

Could you please give me a hand?

Thanks a lot,

Camilo

scottpham commented 5 years ago

Hey Camilo,

Haven't had a chance to test any of this myself, but if you could post some code (either here or in your own repo) I could try it out on my end.

SP

On Mon, Oct 8, 2018 at 10:40 AM Camilo Moreno Kuratomi < notifications@github.com> wrote:

Hi,

I'm a journalist (not a dev), and I would like to ask you if it's currently possible to add file export buttons to tabletop-to-datatables as shown in the datatables documentation https://datatables.net/extensions/buttons/examples/initialisation/export.html. I tried to initilize the options on my js file (after importing the required librairies to the html file), but couldn't make it work.

Could you please give me a hand?

Thanks a lot,

Camilo

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/scottpham/tabletop-to-datatables/issues/7, or mute the thread https://github.com/notifications/unsubscribe-auth/AGrkaoDJO690RxnS6sOGcwBx8qhCezBMks5ui2PQgaJpZM4XNFH0 .

camilomorenokuratomi commented 5 years ago

Thanks Scott I'm trying to add some buttons to your example page without success.

The code to init the datable buttons in the datatables example is this

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );

These are the librairies that you need to load in order to make it work.

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js
https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js

However on your sample code I don't know where to add the options for the buttons.

I tried here

    //initialize the DataTable object and put settings in
    $("#mySelection").DataTable({
      "autoWidth": false,
      "data": data,
      "columns": columns,
      "dom": 'Bfrtip',
      "buttons": ['copy', 'csv', 'excel', 'pdf', 'print'],
      "order": [
        [2, "desc"]
      ], //order on second column
      "pagingType": "simple" //no page numbers
        //uncomment these options to simplify your table
        //"paging": false,
        //"searching": false,
        //"info": false
    });
  }
});

and here

$(document).ready(function() {

  function initializeTabletopObject() {
    Tabletop.init({
      key: key,
      callback: function(data, tabletop) {
        writeTable(data); //call up datatables function
      },
      simpleSheet: true,
      debug: false,
      dom: 'Bfrtip',
      buttons: ['copy', 'csv', 'excel', 'pdf', 'print']

    });
  }

But to no avail. I'm not a programmer so this might be very easy to solve, but I'm blocked. Probably the problem comes from Bfrtip? but not sure.

Just in case, this is the code uploaded to my repo (sorry for the mess)

Thanks again.

Camilo