This topic contains 6 replies, has 3 voices, and was last updated by Sean Sean 3 years, 7 months ago.

Adding Buttons to a Table

  • steve4640

    Posts: 3
    Member Reply #884

    Hi, we downloaded the Medtronic theme and it’s working great for us. However, we’d like to add THESE buttons:

    to THIS table:

    either to the right or left of the Column dropdown.

    Can you point us in the right direction?




    Posts: 3
    Member Reply #889

    Have you added the TableTools extension as a page level plugin?

    <script type="text/javascript" src="../../assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
    • This reply was modified 3 years, 8 months ago by  rrrankin.


    Posts: 3
    Member Reply #891

    I have:

    but I guess I need to get a little more direction on how to specify that the buttons appear on the table as they do not show up there yet.



    Posts: 4527
    Support Staff Reply #897

    Hi :),

    Please update initTable4 function with below code in table-advanced.js:

        var initTable4 = function () {


    /* Table tools samples: */


    /* Set tabletools buttons and button container */


    $.extend(true, $.fn.DataTable.TableTools.classes, {

    “container”: “btn-group tabletools-btn-group pull-right”,

    “buttons”: {

    “normal”: “btn btn-sm default”,

    “disabled”: “btn btn-sm default disabled”




    var table = $(‘#sample_4’);


    /* Formatting function for row expanded details */

    function fnFormatDetails(oTable, nTr) {

    var aData = oTable.fnGetData(nTr);

    var sOut = ‘<table>’;

    sOut += ‘<tr><td>Platform(s):</td><td>’ + aData[2] + ‘</td></tr>’;

    sOut += ‘<tr><td>Engine version:</td><td>’ + aData[3] + ‘</td></tr>’;

    sOut += ‘<tr><td>CSS grade:</td><td>’ + aData[4] + ‘</td></tr>’;

    sOut += ‘<tr><td>Others:</td><td>Could provide a link here</td></tr>’;

    sOut += ‘</table>’;


    return sOut;




    * Insert a ‘details’ column to the table


    var nCloneTh = document.createElement(‘th’);

    nCloneTh.className = “table-checkbox”;


    var nCloneTd = document.createElement(‘td’);

    nCloneTd.innerHTML = ‘<span class=”row-details row-details-close”></span>’;


    table.find(‘thead tr’).each(function () {

    this.insertBefore(nCloneTh, this.childNodes[0]);



    table.find(‘tbody tr’).each(function () {

    this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);



    var oTable = table.dataTable({


    // Internationalisation. For more info refer to

    “language”: {

    “aria”: {

    “sortAscending”: “: activate to sort column ascending”,

    “sortDescending”: “: activate to sort column descending”


    “emptyTable”: “No data available in table”,

    “info”: “Showing _START_ to _END_ of _TOTAL_ entries”,

    “infoEmpty”: “No entries found”,

    “infoFiltered”: “(filtered1 from _MAX_ total entries)”,

    “lengthMenu”: “Show _MENU_ entries”,

    “search”: “Search:”,

    “zeroRecords”: “No matching records found”



    “columnDefs”: [{

    “orderable”: false,

    “targets”: [0]


    “order”: [

    [1, ‘asc’]


    “lengthMenu”: [

    [5, 15, 20, -1],

    [5, 15, 20, “All”] // change per page values here


    // set the initial value

    “pageLength”: 10,


    “dom”: “<‘row’ <‘col-md-12’T>><‘row'<‘col-md-6 col-sm-12’l><‘col-md-6 col-sm-12’f>r><‘table-scrollable’t><‘row'<‘col-md-5 col-sm-12’i><‘col-md-7 col-sm-12’p>>”, // horizobtal scrollable datatable


    // Uncomment below line(“dom” parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout

    // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).

    // So when dropdowns used the scrollable div should be removed.

    //”dom”: “<‘row’ <‘col-md-12’T>><‘row'<‘col-md-6 col-sm-12’l><‘col-md-6 col-sm-12’f>r>t<‘row'<‘col-md-5 col-sm-12’i><‘col-md-7 col-sm-12’p>>”,


    “tableTools”: {

    “sSwfPath”: “../../assets/global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf”,

    “aButtons”: [{

    “sExtends”: “pdf”,

    “sButtonText”: “PDF”

    }, {

    “sExtends”: “csv”,

    “sButtonText”: “CSV”

    }, {

    “sExtends”: “xls”,

    “sButtonText”: “Excel”

    }, {

    “sExtends”: “print”,

    “sButtonText”: “Print”,

    “sInfo”: ‘Please press “CTRL+P” to print or “ESC” to quit’,

    “sMessage”: “Generated by DataTables”

    }, {

    “sExtends”: “copy”,

    “sButtonText”: “Copy”





    var tableWrapper = $(‘#sample_4_wrapper’); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper

    var tableColumnToggler = $(‘#sample_4_column_toggler’);


    /* modify datatable control inputs */

    tableWrapper.find(‘.dataTables_length select’).select2(); // initialize select2 dropdown


    /* Add event listener for opening and closing details

    * Note that the indicator for showing which row is open is not controlled by DataTables,

    * rather it is done here


    table.on(‘click’, ‘ tbody td .row-details’, function () {

    var nTr = $(this).parents(‘tr’)[0];

    if (oTable.fnIsOpen(nTr)) {

    /* This row is already open – close it */



    } else {

    /* Open this row */


    oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), ‘details’);




    /* handle show/hide columns*/

    $(‘input[type=”checkbox”]’, tableColumnToggler).change(function () {

    /* Get the DataTables object again – this is not a recreation, just a get of the object */

    var iCol = parseInt($(this).attr(“data-column”));

    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;

    oTable.fnSetColumnVis(iCol, (bVis ? false : true));




    Posts: 3
    Member Reply #917

    Thanks, I’ll give it a try, is the table-advanced.js located in the angularness > js > scripts directory?


    Posts: 3
    Member Reply #919

    I found the correct table.

    However, I’m replacing this code but it doesn’t seem to be working. The scripts have invalid characters, etc. I posted in a separate topic to see if there is a correct way to do so.



    Posts: 4527
    Support Staff Reply #977

    Oh, sorry, please try below attached JS file.


    You must be logged in to view attached files.

You must be logged in to reply to this topic.