Shouldn't there be a default placement of buttons if they're added in init

Charley

$('.dataTable').each(function (){
    var buttonConfig = [];
    if($(this).hasClass("copyHtml5") || $(this).hasClass("allHtml5Buttons"))
        buttonConfig.push({extend:'copyHtml5',title: 'Data export'});
    if($(this).hasClass("excelHtml5") || $(this).hasClass("allHtml5Buttons"))
        buttonConfig.push({extend:'excelHtml5',title: 'Data export'});
    if($(this).hasClass("csvHtml5") || $(this).hasClass("allHtml5Buttons"))
        buttonConfig.push({extend:'csvHtml5',title: 'Data export'});
    if($(this).hasClass("pdfHtml5") || $(this).hasClass("allHtml5Buttons")) 
        buttonConfig.push({extend:'pdfHtml5',title: 'Data export'});
    var table = $(this).DataTable({buttons: buttonConfig, paging: !$(this).hasClass("noPaging"),});
});

I would expect this to create the datatable, with the buttons that are specified based on the classes of the table

compare to paging: if paging is turned on or off, it appears. Same for several other features.

Buttons are not handled in a consistent way, at least with the bootstrap 3 and 4 styles.

Possibly this is related to the button area not being part of the default bootstrap 3 and 4 dom declaration?

Fiddle: https://jsfiddle.net/charleycartee/9q8tyxxm/

1st table: nothing turned on,just default dataTable
2nd table: paging turned off, html5Buttons turned on

allan

You need to tell DataTables where to put the buttons element. This can be done with the dom option or the buttons().container() method to get the element, which is actually the easiest way since the dom option for Bootstrap is rather complex.

This is a known weak point and one I've got plans to address!

Allan

Charley

re: This is a known weak point and one I've got plans to address!

Glad to hear it.

re: This can be done with the dom option or the buttons().container() method to get the element, which is actually the easiest way since the dom option for Bootstrap is rather complex.

I'll take a look at that. I think I'll want to grab the filter box, and then append a similar div before it (so buttons, then filter box, though the latter won't be shown most of the time that I have I have column filters)

Charley

Added with

$('.dataTable').each(function (){
buttonConfig = [] //Set based tags on the table
var table = $(this).DataTable({ buttons: buttonConfig} );
if(buttonConfig.length > 0){
var buttonContainer = table.buttons( 0, null ).containers();
buttonContainer.addClass("pull-right");
buttonContainer.prependTo($("#" + $(this).attr('id') + "_filter").parent());
}
});

Charley

incidentally, the data-buttons attribute seems to be treated as true/false, rather than allowing a config

http://jsfiddle.net/charleycartee/vb4cg6gz/2/
shows all buttons, not just the copy one.

http://jsfiddle.net/charleycartee/vb4cg6gz/3/
shows just the copy button

Maybe I'm misunderstanding the intended usage

allan

Yes - its difficult like that since it needs to be given as an array, which easy to represent in a string (other than JSON).

I thought data-buttons="['copyHtml5']" might work, but it doesn't appear to. I'll need to look into that.

Allan

Charley

one of the things I find myself wanting to be able to do is override the export name for csv/excel/pdf

if you're declaring the buttonconfig and passing in when you construct the datatable, it's not a big deal to do it... you just use [{extend:'excelHtml5',title: 'exportTitle'}] instead of ['excelHtml5']

if you're going to look at making data-buttons be something other an a boolean, it would be really nice if you could do that same sort of thing.

alternative, you could allow someone add something like data-export-title to the table and then use that when you initialize the table and buttons.

possibly you're already doing something like that with a different data attribute (or maybe the table caption?), but I didn't find it.

allan

It should be possible to have the data attributes as JSON and they will be parsed by jQuery as such, and thus allowed to expand. The only thing they wouldn't allow is functions to be used. But it looks like something is going wrong with that aspect.

Allan

Charley

re: The only thing they wouldn't allow is functions to be used.

That would mean no custom buttons defined through data-buttons, even once you've addressed that, right? Since those really kind of require that you define a function for what they do.

allan

Correct. JSON doesn't allow functions to be defined in it - doing so would be a potential security risk in Javascript, thus it wouldn't be possible to use the data attributes to define functions.

Allan

Charley

I've circled back to this a bit, and one of the things that I wound up doing was adding my own mechanism for adding buttons via a data-additional-buttons tag, along with a linkButton type.

I'm probably reinventing the wheel a bit though, since I have my own custom button type list instead of exting the existing base button types.

var customButtonTypes = {
    "linkButton":{
        action:function ( e, dt, node, config ) {location=config.url;}
    } 
}
    var buttonConfig = [];
            if($(this).data("additionalButtons")){          
                var additionalButtonList = $(this).data("additionalButtons")
                for(var ii = 0; ii< additionalButtonList.length;ii++){
                    var btnConfig = additionalButtonList[ii]
                    if(btnConfig.baseType !== null){
                        if(typeof(customButtonTypes[btnConfig.baseType]) === "object"){
                            jQuery.extend( btnConfig, customButtonTypes[btnConfig.baseType])
                        } else {
                            if(typeof(console.log) === "function"){
                                console.log("unsupported Button type");
                            }
                        }
                    }
                    buttonConfig.push(btnConfig);
                }
            }

var datatablesConfig = {

        buttons: {
            buttons: buttonConfig,
            dom: {
                button: {
                    className: 'btn'
                }
            }
        },
        "drawCallback": function( settings ) {
            var api = new $.fn.dataTable.Api( settings );
            var info = api.page.info();
            var showExportButtons = false;
            try{
                if(info.recordsDisplay > 0){
                    showExportButtons = true;
                }
            } catch (err){}
            if(showExportButtons){
                api.buttons( '.buttons-html5' ).enable()
            } else {
                api.buttons( '.buttons-html5' ).disable()
            }
        }

    };

    var table = $("#target").DataTable(datatablesConfig);