A brief description of the implementation of custom buttons

There are two ways to use custom buttons. Let's introduce them with examples. (Official website example)
The two implementation methods are:

1. Direct definition

2. The other is firstDefine extension, And then use the extended name directly in the button to initialize

   You can implement it in the following three steps

1. Download dependencies

Because Buttons belong to the extended function of JQuery DataTables, we download the extended JS in the normal JS and CSS environment. Or we directly use a packaged JS, the official website has such a function.

Resource download +　Chinese download instruction document:http://datatables.club/extensions/buttons/
Custom package download link:https://datatables.net/download/

We only choose the basics here. (You can choose to expand, merge and compress）

<!--Finally, these four files are enough, of course JQuery is also necessary-->

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>

2. Custom button syntax

//Method 1: Directly define the button function (choose one of the two)
$('#myTable').DataTable( {
    ajax: '/api/data'
    buttons: [
        {
            text: 'Reload',
            action: function ( e, dt, node, config ) {
                dt.ajax.reload();
            }
        }
    ]
} );


//Method 2: First define the extension, and then use the extension (advantage: after defining the extension, you can define it in one place and use it in multiple places)
//1. Define extension
$.fn.dataTable.ext.buttons.reload = {
    text: 'Reload',
    action: function ( e, dt, node, config ) {
        dt.ajax.reload();
    }
};

//2. Use extensions when configuring
$('#myTable').DataTable( {
    ajax: '/api/data',
    buttons: [
        'reload'
    ]
} );

3. Reference examples

//Example code
$.fn.dataTable.ext.buttons.alert = {
    className: 'buttons-alert',

    action: function ( e, dt, node, config ) {
        alert( this.text() );
    }
};


$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'alert',
                text: 'My button 1'
            },
            {
                extend: 'alert',
                text: 'My button 2'
            },
            {
                extend: 'alert',
                text: 'My button 3'
            }
        ]
    } );
} );

Reference blog post

Buttons Chinese document:http://datatables.club/extensions/buttons/

Custom button official website description:https://datatables.net/extensions/buttons/custom

Examples of custom buttons on the official website:https://datatables.net/extensions/buttons/examples/initialisation/plugins