Datatables - Adding a button to header or footer

Question

Can someone please explain to me how you add buttons to the header or footer? Alan the developer of Datatables said you have to be running off a webserver in order to use Table Tools to make use of the buttons. But I'm running Datatables offline on a standalone computer. I've been through all the first page results of Google on adding buttons and none seem to work.

I've tried creating the button in html giving it an id:

 <button id="testbutton">Test</button>

Then calling it in sDom:

$(document).ready(function() {
  oTable = $('#users').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bAutoWidth":false,
    "sDom": '<"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"<"testbutton">ip>',
    "aaData": [
            [ 1, 2, 3, 4, 5 ]
    ]
   });
} );

What am I doing wrong?

Solution 1

Try this:

"sDom": '<"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"<"#testbutton">ip>',

More specifically: <"#testbutton">

You need the # because testbutton is your id not your class.

EDIT: After more investigation, I found a much cleaner sDom format.

"sDom":'<"H"lfr>t<"F"ip>'

This is the default sDom value, so to add your button simple add a div to the sDom.

"sDom":'<"H"lfr>t<"F"<"testbutton">ip>'

You do not need to add any html to your page for this. You can do it all with jQuery. The entire working block looks like this:

$( function() {
    oTable = $( "#users" ).dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth":false,
        "sDom": '<"H"lfr>t<"F"<"testbuttonarea">ip>',
        "aaData": [ [1,2,3,4,5] ]
    });
    $( "#users div.testbuttonarea" ).html('<button id="testbutton">Test</button>');
} );

Solution 2

I check two ways:

Example with reload button

First:

1. Option: "dom": '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr" <"#reloadBtn">lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>'

2. Init event:

       .on('init.dt', function () {
          $('#reloadBtn').html('Refresh').button().click(function (event) {
                    ... on click code
          }).DataTable()......

    var oTable = $('#DataResults').on('init.dt', function () {
        $('#reloadBtn').html('Refresh').button().click(function (event) {
            $(this).prop('disabled', true);
            oTable.ajax.reload(function (json) {
                $('#reloadBtn').prop('disabled', false);
            });
        });
    }).DataTable({
        "dom": '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"<"#reloadBtn">lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>',
        ...
    });

Second:

1. Option without <"reloadBtn"> tag in dom string but with additional unique class name dtwcHeader:
   "dom": '<"dtwcHeader fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>'

2. The same init event but with additional line :
          .on('init.dt', function () {
             $('div.dtwcHeader').prepend('<button id="reloadBtn">Reload</button>');
             $('#reloadBtn').html('Refresh').button().click(function (event) {
                       ... on click code
             }).DataTable()......

   var oTable = $('#DataResults').on('init.dt', function () {
       $('div.dtwcHeader').prepend('<button id="reloadBtn">Reload</button>');
       $('#reloadBtn').html('Odśwież').button().click(function (event) {
           $(this).prop('disabled', true);
           oTable.ajax.reload(function (json) {
               $('#reloadBtn').prop('disabled', false);
           });
       });
   }).DataTable({
       "dom": '<"dtwcHeader fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"<"#reloadBtn">lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>',
       ...
   });
   

Without init.dt event .click() function doesn't bind to button because it doesn't exist yet.

Comments

[Diego Borges]

Me ajudou pela segunda vez! rs