Column width issue with jQuery DataTables and jQuery UI Accordion

Question

I'm using DataTables with a jQuery UI accordion.

I have code which fills the Datatable with data (vis json) when the accordion section is opened, but this doesn't align the header correctly.

Table definition

        $('#tblSuppContacts').dataTable({
              "autoWidth":false
            , "footer": false
            , "info":false
            , "JQueryUI":true
            , "language": {"emptyTable":"No Contacts For Supplier"}
            , "ordering":true
            , "paging":false
            , "scrollY":"325px"
            , "scrollCollapse": true
            , "columnDefs": [
                        { className: "LeftNoWrap", "targets": [ 1,2,3,4,5,6,7 ] }
                    ,   { className: "RightNoWrap", "targets": [ 0 ] }
                ]
        });

This is the code which fires when the accordion section opens which checks if the table has any rows before reading it.

var table = $('#tblSuppAddress').DataTable();
if ( ! table.data().any() ) {fncSuppAddressRead();}

Then this codes loads the data into the table.

    if ( $.fn.DataTable.isDataTable('#tblSuppContacts') ) {
        $('#tblSuppContacts').DataTable().clear();
    }

    var dTable = $('#tblSuppContacts').DataTable();

    for (var i = 0; i < pData.length; i++) {
        dTable.row.add([
             fncFormatNumber(pData[i].REF,0,"N")
            ,trim(pData[i].NAME)
            ,trim(pData[i].DEPARTMENT)
            ,trim(pData[i].POSITION)
            ,trim(pData[i].PHONE)
            ,trim(pData[i].FAX)
            ,trim(pData[i].COMMENT)
            ,trim(pData[i].EMAIL)
        ]);
    }
    $('#tblSuppContacts').DataTable().draw();
}

When i click on the table header, the columns headers then line up correctly with the data columns.

Gyrocode.com · Accepted Answer · 2017-06-10 03:18:08Z

1

Use the code below to force jQuery DataTables to recalculate column widths for initially hidden table when accordion content becomes visible.

$(".accordion").accordion({
   activate: function( event, ui ) {
      $($.fn.dataTable.tables(true)).DataTable()
         .columns.adjust();
   }
});

See jQuery DataTables: Column width issues with Bootstrap tabs for more information, examples and details.

edited Jun 10, 2017 at 3:18

answered Mar 29, 2017 at 15:03

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keith Over a year ago

Sorry for the delay - been away. That's worked great. Thanks.

Collectives™ on Stack Overflow

Column width issue with jQuery DataTables and jQuery UI Accordion

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related