Moving from TableTools to Buttons Issues

hemalait

Hi, I am moving from Tabletools to Buttons, I use Excel,CSV and Print Buttons. When I try to display the buttons by using table.buttons().container().appendTo($('div .btntoolbar'); - by using direct injection (code shown below) I see button text and they are functional but they are not in a box like how actual buttons should look like, I am not sure what is causing this, some Dom setting? and I am getting an error "TypeError: oTable.buttons() is not a function". I have tried adding buttons in both ways direct insertion and new constructor, I am getting same error. I ran dataTable debug as well http://debug.datatables.net/efejoj .

$.(document).ready(function()){

var table = $('#datatable_convey');
var oTable = table.dataTable({
        "dom" : "<'dt-toolbar'<'col-xs-12 col-sm-6'l><'col-sm-6 col-xs-6 hidden-xs'><'col-md-4'<'btntoolbar'>>Br>" +    "t" +
        "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>", //dom settings: l=length changing input control(Records per page); 
        buttons : [{
                extend : 'excelHtml5',
                text : '<fmt:message bundle="${msg}" key="excel_txt"/>',
                exportOptions : {
                    columns : ':visible'
                },
                action : function (e, dt, node, conf) {
                    console.log('Button 1 clicked on');
                }
            }, {
                extend : 'csvHtml5',
                text : '<fmt:message bundle="${msg}" key="csv_txt"/>',
                exportOptions : {
                    columns : ':visible'
                }
            }, {
                extend : 'print',
                text : '<fmt:message bundle="${msg}" key="print_txt"/>',
                autoPrint : false,
                exportOptions : {
                    columns : ':visible'
                }
            },
        ],
        "paging" : true, // Table pagination
        "ordering" : true, // Column ordering
        "info" : true, // Bottom left status text
        "destroy" : true,
        sAjaxSource : "/getDataTable", //I have removed ajax call 
        "preDrawCallback" : function () {
            // INITIALIZE THE RESPONSIVE DATATABLES HELPER ONCE.
            if (!responsiveHelper_datatable_col_reorder) {
                responsiveHelper_datatable_col_reorder = new ResponsiveDatatablesHelper($('#datatable_convey'), breakpointDefinition);
            }
        },
        "rowCallback" : function (nRow, aData) {
            responsiveHelper_datatable_col_reorder.createExpandIcon(nRow);

            return nRow;
        },
        "fnDrawCallback" : function () {
            //bind the click handler script to the newly created href elements held in the table
            $('.postLink').bind('click', postclick);
        },
        "fnInitComplete" : function (oSettings, json) {
            // END BLOCK UI
            $.unblockUI();
            // SHOW WIDGET GRID
            $("#wid-id-1").show();
        },
        "oLanguage" : { //Language used in the DataTable
            "sEmptyTable" : "<fmt:message bundle=" $ {
                commonmsg
            }
            " key=" DT_emptytable " />",
            "sInfo" : "<fmt:message bundle=" $ {
                commonmsg
            }
            " key=" DT_sInfo " />",
            "sInfoEmpty" : "<fmt:message bundle=" $ {
                commonmsg
            }
            " key=" DT_sInfoEmpty " />",
            "sLoadingRecords" : btnClick ? "<fmt:message bundle=" $ {
                commonmsg
            }
            " key=" DT_sLoadingRecords " />" : "",
            "sZeroRecords" : "<fmt:message bundle=" $ {
                commonmsg
            }
            " key=" DT_sZeroRecords " />",
            "sProcessing" : "<fmt:message bundle=" $ {
                commonmsg
            }
            " key=" DT_sProcessing " />",
            "oPaginate" : {
                "sNext" : "<fmt:message bundle=" $ {
                    commonmsg
                }
                " key=" DT_sNext " />",
                "sPrevious" : "<fmt:message bundle=" $ {
                    commonmsg
                }
                " key=" DT_sPrevious "/>"
            }
        }
    }); // end table.dataTable
$oTable.buttons().container().appendTo($('div .btntoolbar) );

}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you link to a test case showing the issue please. It sounds like it might be CSS related, in which case I would need to be able to see the page.

Allan

hemalait

Hi Allan,

Thank you replying. You were correct, for TableTools I had defined the "DTTT btn-group" class from the dataTable.bootstrap.js and since the buttons.bootstrap is using "dt-buttons btn-group" class buttons loaded without styling. Thank you for pointing out this, I appreciate it. This resolved my issue.