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

Adding Buttons to a Table


  • steve4640
    Participant

    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:

    http://www.screencast.com/t/DTe2LemN5

    to THIS table:

    http://www.screencast.com/t/e48ogcxuQ

    either to the right or left of the Column dropdown.

    Can you point us in the right direction?

    Thanks,

     


    rrrankin
    Participant

    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, 5 months ago by  rrrankin.

    steve4640
    Participant

    Posts: 3
    Member Reply #891

    I have:

    http://www.screencast.com/t/3lOkQQudG

    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.

    Thanks,

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #897

    Hi :),

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

        var initTable4 = function () {

     

    /* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */

     

    /* 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 http://datatables.net/manual/i18n

    “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 */

    $(this).addClass(“row-details-close”).removeClass(“row-details-open”);

    oTable.fnClose(nTr);

    } else {

    /* Open this row */

    $(this).addClass(“row-details-open”).removeClass(“row-details-close”);

    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));

    });

    }


    steve4640
    Participant

    Posts: 3
    Member Reply #917

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


    steve4640
    Participant

    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.

    Thanks,

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #977

    Oh, sorry, please try below attached JS file.

     

    Attachments:
    You must be logged in to view attached files.

You must be logged in to reply to this topic.