Positioning a datatable button directly above some certain column header

arunondeck

Hi,

I am trying to position a button directly over a column header. The button is used to control visibility of some other columns and the button position must change when column is resized when the other columns are hidden.

Currently what I am doing is, using jquery creating a row inside thead and copying the original header into it and then after datatables is initialised, moving the button into that row, above the column. I am trying to use a column resize plugin for live resizing and this somehow messes it up. Also it seems to me, there maybe a better method.

My code,

$('table thead tr').clone().addClass('control-row').insertBefore('table thead tr');
$('table thead .control-row th').each(function(index,value){
    $(value).contents().filter(function () {
         return this.nodeType === 3; 
    }).remove();
}); /* to make the row contents blank*/

var tableInstance = $('table').DataTable({
    autoWidth : false,
    paging : false,
    bFilter : false,
    columnDefs : [
        {"width" : "20%", "targets" : 0 },
        {"width" : "15%", "targets" : 0 }
    ],
    dom : '<"toolbar">Bfrtip',
    initComplete: function(settings) {
        console.log('table');
        $('table').colResizable({liveDrag:true, fixed: false});
    },
    buttons: [
        {
            text: '-',
            action: function(e,dt,node,conf){
                var cols = [4,5,6,7,8];
                for(var x in cols)
                {
                    column = tableInstance.column(cols[x]);
                    column.visible(!column.visible());
                }
            }
        }
    ]
});

// to place button inside the third column inside the header, dynamically created row
tableInstance.buttons(1).container().appendTo(
    $('table thead tr:first-child th:nth-child(3)'),tableInstance.table().container()
);

Edit: I am using Datatables 1.10.9.