having 2 datatables in same page accessed using tabs

having 2 datatables in same page accessed using tabs

anithaindevanithaindev Posts: 4Questions: 1Answers: 0

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!

Answers

  • anithaindevanithaindev Posts: 4Questions: 1Answers: 0

    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?

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75

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

  • anithaindevanithaindev Posts: 4Questions: 1Answers: 0
    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();
        } );
    }
    
  • anithaindevanithaindev Posts: 4Questions: 1Answers: 0

    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.

This discussion has been closed.