Built-in buttons

The Buttons framework is useful if you wish to define custom buttons, or use those included in another extension such as Editor, but its utility is greatly enhanced by the button types that are included as part of the library.

These buttons are not part of the core library, but rather are individual files that can be included as you require. For example you may wish to provide HTML5 file export buttons but not Flash export buttons. This simply ensures that only the code you require is delivered to the end user.

There are three button types that are part of Buttons:

  • File export
  • Print
  • Column visibility

File export

When displaying data in a DataTable, it can often be useful to your end users for them to have the ability to obtain the data from the DataTable, extracting it into a file for them to use locally. This can be done with either HTML5 based buttons or Flash buttons.

Buttons has four built-in buttons types which will automatically detect what the browser abilities are and what software is available - they will automatically use the HTML5 buttons if possible, falling back to Flash and finally not displaying at all if none of the requirements are met:

  • copy - Copy to clipboard
  • csv - Save to CSV file
  • excel - Save to Excel XLSX file
  • pdf - Save to a PDF document

HTML5

The latest browsers (IE10+ and evergreen browsers) have made great strides in their abilities, and creating local files is something that most can do very well now. As such, there are four buttons types available (it is recommended you use the generic buttons documented above in preference to these buttons):

  • copyHtml5 - Displays a dialogue asking the user to use their browser's copy command (HTML5 does not have a copy to clipboard API)
  • csvHtml5 - Create and save an CSV file
  • excelHtml5 - Create and save an Excel XLSX file - this requires JSZip. Note - this will not work in Safari.
  • pdfHtml5 - Create and save a PDF document - this requires PDFMake and a suitable font file.

Flash

Older browsers don't have the luxury of being able to create files locally - in order to provide support for these browsers a Flash version of the file export options is available.

The advantage of these buttons is that they have no external dependency other than Flash. The disadvantage of these buttons is that they require Flash.

  • copyFlash - Immediately copies the data to clipboard
  • csvFlash - Create and save an CSV file
  • excelFlash - Create and save an Excel XLSX file
  • pdfFlash - Create and save a PDF document. Note - this does not support UTF8 characters.

Print

Another common way to extract data from a table is to print it. The print button type provides this ability by opening a new window in the user's browser, drawing a table with a copy of the data from the original table.

It then, by default, will automatically trigger the browser's print function allowing the end user to print the table. The window will be closed once the print is complete, or has been cancelled.

Column visibility

While the buttons described above focus on extracting data from the table, the column visibility buttons instead control the display of the table. They provide buttons that can be used to toggle the visibility of individual columns, groups of columns or explicitly set the visibility of columns.

The most commonly used of the available buttons is the colvis type. This displays a collection button with a list of all of the columns in the table (this can be customised) with the ability of the end user to toggle the visibility of the columns with a simple click.

This module replaces the ColVis DataTables extension which has now been retired.