having 2 datatables in same page accessed using tabs

anithaindev

I am having 2 datatables in same page accessed using tabs. I used the following the following code to get the fixed header for 2 different table 123 and 456

$('#123').DataTable({
"aoColumnDefs":
[{
"visible": false,
"targets": 7
}
],
"bPaginate": false,
"sScrollY": "340px",
"bInfo": false,
"bFilter": true,
"bSort": true,
"aaSorting": [[ 0, "asc" ]],
"aoColumns": [null, null, { "bSortable": false }]
});
$('#123_paginate').attr("style","background-color:#cadffa;line-height:20px;color:#EAEAEA")

$('#456').DataTable({
"aoColumnDefs":
[{
"visible": false,
"targets": 8
}
],
"bPaginate": false,
"sScrollY": "340px",
"bInfo": false,
"bFilter": true,
"bSort": true,
"bScrollCollapse": false,
"aaSorting": [[ 0, "asc" ]],
"aoColumns": [null, null, { "bSortable": false }]
});
$('#456_paginate').attr("style","background-color:#cadffa;line-height:20px;color:#EAEAEA")

In one tab, the fixed header header is working fine but on the other tag the table header is not getting expanded according to the tbody data

need help!

anithaindev

by inspecting the code, I can find the the width is set for the datatable 123 but for datatable 456, the width is set as zero

what is the problem?

jLinux

Can you format the code first? The instructions are in the text below the text box for replies?

anithaindev

function activeDataTableSetting()
{
    $('#activeTransporterVehicleTable').DataTable({
        "aoColumnDefs": 
            [{
                "visible": false, 
                "targets": 7
            }
        ],
        "bPaginate": false,
        "sScrollY":  "340px",
        "bInfo":     false,
        "bFilter":   true,
        "bSort":     true,
        "aaSorting": [[ 0, "asc" ]],
        "aoColumns": [null, null, { "bSortable": false }] 
    });
    $('#activeTransporterVehicleTable_paginate').attr("style","background-color:#cadffa;line-height:20px;color:#EAEAEA")
}

function inActiveDataTableSetting()
{
    $('#inActiveTransporterVehicleTable').DataTable({
        "aoColumnDefs": 
            [{
                "visible": false, 
                "targets": 8
            }
        ],
        "bPaginate": false,
        "sScrollY":  "340px",
        "bInfo":     false,
        "bFilter":   true,
        "bAutoWidth": false,
        "bSort":     true,
        "bScrollCollapse": false,
        "aaSorting": [[ 0, "asc" ]],
        "aoColumns": [null, null, { "bSortable": false }] 
    });
    $('#inActiveTransporterVehicleTable_paginate').attr("style","background-color:#cadffa;line-height:20px;color:#EAEAEA")
    $(window).bind('resize', function () {
        var inActiveTransTable = $('#inActiveTransporterVehicleTable').dataTable();
        inActiveTransTable.fnAdjustColumnSizing();
    } );
}

anithaindev

have provided the above 2 function which are used for 2 datatables in a single page

for the first table (activeTransporterVehicleTable), i can get the fixed header but for the second table (inActiveTransporterVehicleTable), The header is fixed but the header row is not aligned to the width of the tbody rows.

by inspecting I saw that for the first table width for thead column is set according to each tbody columns.

but in the second table, width is set as zero for the header row.