how to get node of child table when created to fix toolbar placement

rldean1

I've had a great deal of success following this blog article on creating a child table (table within a table).

However, I applied the Bootstrap style, and I'm having difficulty getting the buttons to show for the child table.

The plot thickens: There is a potential to have multiple "child" tables open. Through some internal working of DT, each child get its own unique ID... DataTables_Table_1, DataTables_Table_2, etc...

I don't know how to find the ID of the table as it is created... My theory is that I somehow need to identify the ID of the table that is being generated in the .createChild() function in order to adjust the buttons.

Here's some pseudo-code. Any ideas?

// row = a variable storing the DT object for the parent row that was clicked
, createChild: function (row) {



    // create a usable data object for the parent row that was clicked
    parentRowData = row.data();

    // This is the table we'll convert into a DataTable
    var table = $('<table class="table table-striped table-bordered" width="100%"/>');

    // Display it as the child row
    row.child(table).show();


    var tblInterviewTimes = table.DataTable({
        /**
         * 
         * config
         * 
         */
    }).on('init.dt', function () {

        //fix placement of buttons toolbar

        // trying to get the ID of tblInterviewTime, but
        // I can't seem to interact with tblInterviewTimes here
        wrapper = tblInterviewTimes.table().node().id + '_wrapper';

        // i need to get the ID of the table so I can appropriately place the 
        // boostrap-styled Editor toolbar buttons
        tblInterviewTimes.buttons().container().appendTo(wrapper + ' ' + '.col-md-6:eq(1)');

    });



}

allan

You shouldn't really need to know the table id - use table().container() to get the container element for the table - so in this case tblInterviewTimes.table().container() and manipulate the DOM in there - so you might have:

    new $.fn.dataTable.Buttons( tblInterviewTimes, [
      ...
    ] );
 
    tblInterviewTimes.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', tblInterviewTimes.table().container() ) );

The layout is a real pain point in DataTables when using the styling libraries. It will be much better in v2 .

Allan

rldean1

PERFECT!

And, I just read your post about Version 2. Sounds exciting -- I can't wait!