Adding buttons to publications manually

Topics

(1) Standard buttons
(2) Customizing standard buttons
(3) Custom buttons

(1) Standard buttons

Buttons can be added to publications directly from the Data Publisher (see image below – click to enlarge). This user friendly feature is the simplest way to add standard buttons to your publication.

(2) Customizing standard buttons

The publication extention section of the Data Explorer allows us to add standard buttons with standard button captions to our publications only. Sometimes we want to have more control over our buttons. For these use cases we can directly manipulate the DOM options through the advanced settings section of a publication.

Supported standard button types and their abbreviations

C = Export to CSV
E = Export to Excel
F = Export to PDF
P = Print
Y = Copy to clipboard
S = Export to SQL
V = Toggle column visibility – list
T = Toggle column visibility – buttons

Example

{
	"dom": "Blfrtip", 
	"wpda_buttons": "CEF"
}
  • Adds export to CSV, Excel and PDF buttons to a publication
  • Options dom and wpda_buttons must be added to column table options advanced of the publication
  • Make sure column table options advanced contains valid JSON

Explanation

  • The B in { “dom”: “Blfrtip” } adds the buttons extension to the publication (case sensitive)
  • Characters CEF in { “wpda_buttons”: “CEF” } will add the standard buttons CSV, Excel and PDF (case insensitive)
  • Buttons are shown in the order they appear in option wpda_buttons

Adding row selection

The previous example of export buttons will export all visible rows. Use option “select” to allow users to select specific rows to be exported:

{
	"select": {
		"selector": "td:not(.dtr-control)",
		"style": "multi" 
	}
}

This option allows publication users to use the mouse to select rows. The row selection will be reflected in the export, print and copy actions.

Adding column selection

Column selection is available from a list button or a toggle button per column. Use option wpda_buttons to add column selection.

Add button to toggle columns from a list

{
	"dom": "Bfrtip", 
	"wpda_buttons": "V"
}

Add a button for each column

{
	"dom": "Bfrtip", 
	"wpda_buttons": "T"
}

Notes

  • This option requires that the button extension is loaded (needs: “dom”: “Bfrtip”)
  • Toggle column visibility does not work when search and list boxes are added to the table header
  • Toggle column visibility is not reflected in SQL exports

(3) Custom buttons

Option wpda_buttons_custom allows plugin users to add multiple custom buttons their publications.

Example

{
	"wpda_buttons_custom": [
		{
			"text": "My Function",
			"action": "function ( e, dt, node, config ) { my_function(); }"
		},
		{
			"text": "Print selected rows",
			"extend": "print"
		},
		{
			"text": "Print selected rows and columns",
			"extend": "copy",
			"exportOptions": {
				"columns": ":visible"
			}
		}
	]
}

Use custom buttons to redefined standard buttons (see print buttons examples) to:

  • Change the button label
  • Change button behaviour

Add your own javascript functions to a custom button (see My Function example). More information about this topic can be found here:

» jQuery DataTables custom buttons

A WP Data Access example can be found here:

» Code Manager custom button example

Use the Code Manager to add your javascript function to your web page:

» Add a javascript function with the Code Manager

Button labels

Button labels are show in uppercase by default. You can change this in your css.

.dt-button {
    text-transform: inherit;
}

Note

  • Custom buttons are shown in the order they are added to the custom button array and before standard buttons

Peter Schulz is a lecturer in information technology at the HAN university of applied sciences. He is an experienced programmer with more than 25 years experience in Oracle databases and tools. Peter is the developer of WordPress plugin WP Data Access.

Leave a Reply

Your email address will not be published.

7 + five =