Adding bootstrap data-toogle & data-target into data-table button

Muhammad Izzat

Hi everyone, I have an issue similiar to this, but I'm having trouble understanding the answer

Originally I have a button with bootstrap data-toggle in it

<button
    data-toggle="modal" data-target="#create_new_workorder"
    type="button" class="btn btn-sm btn-warning btn-outline"><span
    class="hidden-md hidden-sm hidden-xs">Create Workorder</span> <i
    class="fa fa-fw fa-plus"></i>
</button>

but now I'm using data-table button which looks something like this

buttons: [
    {
        text: 'Create Workoreder',
        action: function () {
            create_workorder_window();
        },
        className: 'btn btn-warning btn-outline'
    },
    { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'}
],

how can I add the data-toggle="modal" and the data-target="#create_new_workorder"?

Any help is much appreciated

rduncecb

You could use jquery .attr(...) function on the button nodes to add your data attributes. Something like:

table.buttons().nodes().attr({data-toggle: "modal", data-target="#create_new_workorder")

Buttons API - node() fn: https://datatables.net/reference/api/buttons().nodes()

You could use a class name on the button and supply the selector to the buttons(...) call to add the attributes to specific buttons if required.

like:

buttons: [
    {
        text: 'Create Workoreder',
        action: function () {
            create_workorder_window();
        },
        className: 'btn btn-warning btn-outline data-newworkorder'
    },
    { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'}
],

then:

table.buttons('.data-newworkorder').nodes().attr({data-toggle: "modal", data-target="#create_new_workorder")

Muhammad Izzat

Hi @rduncecb, thank you for your answer and apology for the late reply, I now have better understanding on how the button API works thanks to you but there is a slight problem, I can change the css and everything but whenever I try to declare the button attribute, my data-table stop working, this is my code :

var workorder_table = $('#workorder_table').dataTable({
    dom: 'Blfrtip',
    JQueryUI: true,
    bPaginate: false,
    bServerSide: true,
    sScrollX: "100%",
    responsive: true,
    select: true,
    buttons: [
        {
            text: 'New',
            action: function () {
            },
            className: 'btn btn-warning btn-outline data-newworkorder'
        },
        { extend: 'edit',   editor: workorder_editor, className: 'btn btn-warning btn-outline' },
        { extend: "remove", editor: workorder_editor, className: 'btn btn-danger btn-outline' },
        { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'}
    ],

workorder_table.on('click', 'tr', function () {
    if ($(this).hasClass('bg-gray-light')) {
        $(this).removeClass('bg-gray-light');
    }
    else {
        workorder_table.$('tr.bg-gray-light').removeClass('bg-gray-light');
        $(this).addClass('bg-gray-light');
    }
});

workorder_table.buttons('.data-newworkorder').attr({data-toggle: "modal", data-target="#create_new_workorder"});

bindrid

Using class is only one way you can open a bootstrap modal. You can also open it with code.

https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_modal_js&stacked=h

Muhammad Izzat

Found a solution, just declare this above my data-table script

$('#workorder_table').on('init.dt', function() {
   $('.data-new_workorder')
     .attr('data-toggle', 'modal')
     .attr('data-target', '#create_new_workorder');
});