Pure HTML export buttons in jQuery Data Table

15,921

SOLUTION

Use the code below for HTML5 export buttons that don't use Flash.

var table = $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      {
         extend: 'collection',
         text: 'Export',
         buttons: [ 'pdfHtml5', 'csvHtml5', 'copyHtml5', 'excelHtml5' ]
      }
   ]
});

You need to use Download Builder to include DataTables, Buttons, HTML5 export, JSZip and pdfmake libraries to produce links to CDN for JS/CSS files.

DEMO

See this jsFiddle for code and demonstration.

LINKS

Share:
15,921
NullPointer
Author by

NullPointer

It's a fun :) when working with computers and programming but sometimes it's scary :( too. #SOreadytohelp profile for NullPointer on Stack Exchange, a network of free, community-driven Q&A sites http://stackexchange.com/users/flair/2476406.png

Updated on June 17, 2022

Comments

  • NullPointer
    NullPointer about 2 years

    I am using jQuery DataTables. It provides set of export buttons. But those buttons are swf buttons.

    I would like to have HTML drop down buttons. I have gone through its help but could not found such code to set HTML5 buttons other than built in Flash.

    I would like to have drop down buttons like below

    Export
    - PDF
    - CSV
    - HTML
    - Excel

    Above buttons are set of HTML tags (generally what they are in HTML). Can I do that?

    Edit:

    I would like to generate buttons using button, div, ul, li tags combination which we generally do in our regular HTML files.