Buttons plug-ins

The Buttons extension for DataTables provides a number of built in buttons, and the many of the other extensions add buttons for their own interactions. However, occasionally you will encounter a use case where you need to create your own button, in such a case you might wish to publish it as a plug-in for Buttons that others can also use!

How to use

To make use of one of the plug-in buttons below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable.

Browser

Loading button plug-ins directly in the browser is just a case of loading the Javascript for the plug-in. As an example the code below makes use of download buttons (saved into a file):

<script type="text/javascript" src="dataTables.js"></script>
<script type="text/javascript" src="button.download.js"></script>
<script type="text/javascript">
const table = new DataTable('#example', {
  layout: {
    topStart: {
      buttons: [{
        extend: 'download',
        url: '/api/download'
      }]
    }
  }
});
</script>

Plug-ins which can be included in the browser are available on our CDN. See the details page for each plug-in for the full CDN URL.

ES modules

The API plug-ins are also available as ES modules, which can be loaded from the datatables.net-plugins package (.mjs files). You need to include the file required for the plug-in. Below we use the example of download again:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/buttons/button.download.mjs';

const table = new DataTable('#myTable', 
  layout: {
    topStart: {
      buttons: [{
        extend: 'download',
        url: '/api/download'
      }]
    }
  }
);

More info

For more information on using the Buttons extension for DataTables, please refer to the Buttons section of the manual.

Plug-in methods

button.download	Download Button