Documentation for adding custom buttons to a datatable; TableTools

Taylor514ce

Where can I find the documentation for adding/coding a Jquery UI button into the same DOM container as the filter (Search box)?

I may want to use TableTools as well, but cannot find the examples of how to insert and extend TableTools.

kthorngren

Tabletools has been retired in favor of using the Buttons extension:
https://datatables.net/extensions/tabletools/

https://datatables.net/extensions/buttons/

Here is an example of a custom button using Buttons:
https://datatables.net/extensions/buttons/examples/initialisation/custom.html

Kevin

Taylor514ce

Ah, it's an "Extension", not a "Plug-in", which is why I couldn't find it. Thanks, I'm studying/reading now.

Taylor514ce

Using the "buttons" extension seems to require the "dom" option, and using the "dom" option breaks/removes table styling elements. I'm using the ThemeRoller "redmond" style, and when I add the dom option to try to display my buttons, the "background" css element for the table header and footer fails to render and I get a plain white background instead.

kthorngren

You don't have to use the dom. Is that a jQuery UI theme?

I think you will want to look at this example:
https://datatables.net/extensions/buttons/examples/styling/jqueryui.html

Or one of the other examples that match the framework you are using.

Kevin

Taylor514ce

Yes, I'm using a JQuery UI theme.

Without the "dom": "B" option set, the button does not display. When it is set, styling "breaks" but the button displays and works.

I'm going to try to reapply the entire CSS, as my table's row colors don't alternate with even/odd... seems like I have an overall problem with the CSS "background" property.

kthorngren

I previously created an example using jQuery UI tabs which I just updated to have one of the tabs display the button using the code in the example. It does work (Tab 1 uses dom option and Tab 2 uses the insertBefore method):
http://live.datatables.net/jamirafa/3/edit

Of course your environment is different and may need a different selector. For the specific code example you will need to also have the search option (f) in the dom options. I use Bootstrap in my projects and use similar code (.appendTo) to insert my buttons without the B dom option.

Kevin

Taylor514ce

My document ready function... The error I'm getting is that "buttons()" is not a function.

$(document).ready(function() {

  // Tabs
  $("#tabs").tabs( { 
    fx: { opacity: 'toggle', duration: 'fast' },
    activate: function (event, ui) { 
      var newId = ui.newPanel.attr("id");
      var tableId = newId.replace("tab", "tbl");
      $('#' + tableId).DataTable().columns.adjust();
    }
  } );   

  obj_tblTemplates = $('#tblTemplates').DataTable( {
    processing: true,
    serverSide: false,
    scrollY: $(document).height() - 320,
    scrollCollapse: true,
    paging: false,
    info: false,
    ajax: "http://<!--SERVERURL-->/fetchTemplates"      
  } );  
  
  obj_tblProcesses = $('#tblProcesses').DataTable( {
    dom: '<"top"f>rt<"clear">'    
    processing: true,
    serverSide: false,
    scrollY: $(document).height() - 320,
    scrollCollapse: true,
    paging: false,
    info: false,
    columnDefs: [ {
      targets: 2,
      createdCell: function (td, cellData, rowData, row, col) {
        if ( cellData == 'Inactive' ) {
          $(td).css('color', 'red');
          $(td).css('text-decoration', 'line-through');
        }
      }
    } ],
    buttons: [ {
      text: "My button",
      action: function ( e, dt, node, config ) {
        alert( "Button activated" );
      }
    } ],    
    ajax: "http://<!--SERVERURL-->/fetchProcesses"      
  } );
  
  obj_tblServerLog = $('#tblServerLog').DataTable( {
    processing: true,
    serverSide: false,
    scrollY: $(document).height() - 320,
    scrollCollapse: true,
    paging: false,
    info: false,
    columnDefs: [ {
      targets: 0,
      createdCell: function (td, cellData, rowData, row, col) {
        $(td).css('white-space', 'nowrap');
      }
    } ],
    ajax: "http://<!--SERVERURL-->/fetchChangeLog"      
  } );

  obj_tblProcesses.buttons().container().insertBefore( '#tblProcesses_filter' );
  
  setInterval( function () {
    obj_tblProcesses.ajax.reload( null, false ); // user paging is not reset on reload
  }, 30000 );

  setInterval( function () {
    obj_tblServerLog.ajax.reload( null, false ); // user paging is not reset on reload
  }, 50000 );

  
} );

Two issues:

1) The CHROME developer console reports "buttons() is not a function".
2) Styling is broken whenever the dom: option is used, see attachments.

Line 65 is where I insert the button into the table.

Taylor514ce

I narrowed the issue down to having an ajax datasource. If I hardcode the table data in the HTML and remove the ajax datasource, the custom button is properly inserted, styled, and fully functional.

Add the ajax source back in, and the button never renders at all.

SOLVED: Suspecting the issue was inserting buttons into a container that probably isn't visible yet, because of the ajax load... I moved the buttons() call out of document.ready and put it into the tab.activate() event handler, to insert the button when the tab is clicked. This seems to be the "fix".

kthorngren

Sounds like maybe Datatables hasn't initialized the table when trying to insert the buttons. Maybe you need to put the buttons() function inside initComplete for that table.

https://datatables.net/reference/option/initComplete

Kevin

Taylor514ce

Yes, that was the issue.