DataTables does not allow to access buttons right after creation

pmatveev

Hello,

I have faced an issue I have never had before. I am creating a DataTable and then I'm processing some buttons to slightly override their behavior (make them execute actions on mousedown instead of onmouseclick). However, after some time (previously it worked), "buttons().each" does not process any button when executed during page creation.

When I execute the same code (except for re-creation of dataTable) in console after document is built, everything works fine. My code is the following:

    dataTable = table.DataTable({
        ajaxSource : table.attr("ajaxSource"),
        buttons : {
            dom : {
                container : {
                    tag : 'div',
                    className : 'button-item'
                }
            },
            buttons : buttons
        },
        columns : columnDefs,
        dom : "<'row'<'col-sm-12 errorHolder'>>"
                + "<'row'<'col-sm-6'l><'col-sm-6'f>>"
                + "<'row'<'col-sm-12'B>>"
                + "<'row'<'col-sm-12 table-responsive'tr>>"
                + "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        fnDrawCallback: function( oSettings ) {
            for (var property in dataTable.expanded) {
                if (dataTable.expanded.hasOwnProperty(property)) {
                    table.find('tr#' + property).find('td.details-control').click();
                }
            }
        },
        language : {
            url : loc
        },
        order : order,
        rowId : 'id',
        select : true
    });
    
    dataTable.buttons().each(function(button, index) {
        var elem = $(button.node);
        if (elem.hasClass('dt-link')) {
            var action = dataTable.button(index).action();
            dataTable.button(index).action(function(e, dt, node, config) {
                window.location = node.attr('href');
            });
            elem.on('mousedown', function(e) {
                action(e, dataTable, elem, button.c);
            });
        }
    });

Could you please advise how to make it work again?

pmatveev

Hello,

It turns out that for some reason my datatable was not fully initialized (but still it worked before!). The following solves my issue:

initComplete: function(settings, json) {
            var api = new $.fn.dataTable.Api( settings );
            api.buttons(".dt-link").each(function(button, index) {
                var elem = $(button.node);
                var btn = api.button(button.node);
                var action = btn.action();
                btn.action(function(e, dt, node, config) {
                    window.location = node.attr('href');
                });
                
                elem.on('mousedown', function(e) {
                    action(e, api, elem, button.c);
                });
            });
        }

allan

Thanks for posting back - good to hear you've got it working now.

Allan