Pure HTML export buttons in jQuery Data Table

Question

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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

9

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 2, 2015 at 16:07

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

Smile Over a year ago

Can't I set HTML code (div, buttons, a etc. tags) in buttons and apply HTML classes? Because these buttons do not feet to my requirements.

Gyrocode.com Over a year ago

@NullPointer, These are pure HTML buttons. See Button - Options, you can set class with buttons.buttons.className option. You can also create custom buttons.

Smile Over a year ago

What if I want to add HTML tags? Because my static HTML design includes 'Export' as button tag, and sub menu is comprise of <div> and <ul> <li> under it. Sorry for more questions.

Gyrocode.com Over a year ago

@NullPointer, you can use your own layout/design and trigger DataTables buttons programmatically via API button().trigger(), see jsfiddle.net/gr5er1pj/2

Gyrocode.com Over a year ago

@HalfBloodPrince, the minimal set is mentioned in the answer: DataTables, Buttons, HTML5 export, JSZip and pdfmake. Also make sure you're using 'DataTable()` instead of 'dataTable()'.

|

Collectives™ on Stack Overflow

Pure HTML export buttons in jQuery Data Table

Edit:

1 Answer 1

SOLUTION

DEMO

LINKS

19 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit:

1 Answer 1

SOLUTION

DEMO

LINKS

19 Comments

Your Answer

Sign up or log in

Post as a guest

Related