Pure HTML export buttons in jQuery Data Table

2019-06-24 08:15发布

问题:

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.

回答1:

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

  • HTML5 export buttons
  • Button - collection