Column headers in dialog not adjusting correctly.

chad@mgic

Hello,

I know this issue has plagued datatables for a long time, but I need some help. I have a bunch of datatables in jQuery dialogs, and the headings almost never match the contents of the table. The headings are not resizing as the dialog is resized either. When I click on a column to sort it, the columns resize correctly. As a quick fix, I would like to programatically trigger the code that resizes the columns when a user clicks on a column heading to sort it. Can someone tell me how I would trigger resize or sort code from my application?

This behavior has been noticed with DataTables version 1.10.1 and 1.10.2.

chad@mgic

Actually this problem is happening with one table in our application that is created slightly differently than the other tables in our application. Here is the HTML that is used for the table.

<table
                id="myTableId"
                class="hover small-12 columns">
                <thead>
                </thead>
                <tbody>
                </tbody>
            </table>

Here is the table java script to create the table.

table = $("#myTableId").DataTable({
                    dom: '<"clearfix dataTablesPrefix"<"title">lf><"clearfix"Rt><T><"clearfix dataTablesPostfix"ip>',
                    "oLanguage": {
                        "sSearch": ""
                    }, 
                    data: myDataArray
                    , "scrollY": "300px"
                    , "columnDefs": [
                                     {
                                        targets: [0]
                                        , searchable: false
                                        , orderable: false
                                     }
                                     , { "title": "Rule", "targets": 1, "orderable": true }
                                     , { "title": "Col2", "targets": 2 }                                    
                                     , { "title": "Col3", "targets": 3 }
                                     , { "title": "Col4", "targets": 4 }
                                     , { "title": "Col5", "targets": 5 }
                                     , { "title": "Col6", "targets": 6 }
                                     , { "title": "Col7", "targets": 7 }
                                     , { "title": "Col8", "targets": 8 }
                                     , { "targets": 9
                                         , searchable: false
                                         , orderable: false
                                     }
                                    ]
                    , columns: [
                                {data: function(row, type, val, meta) {
                                  return '<input type="checkbox" name="' + obj1.checkboxName +'" value="' + row.id + '"/>';
                                }}    
                                , { data: function ( row, type, val, meta ) {
                                          return '<a href="#" class="aClass">' + row.name + '</a>';
                                        }
                                   ,sortable: false}
                                ,{ data: 'col2'}
                                ,{ data: 'col3'}
                                ,{ data: 'col4'}
                                ,{ data: 'col5'}
                                ,{ data: 'col6'}
                                ,{ data: 'col7'}
                                ,{ data: 'col8'}
                                ,{data: function() {
                                  return '<a href="#" class="aClass"></a>';
                                }}
                                ],
                                order: [ 1, "asc" ]
                  });

chad@mgic

So the root of the problem seems to be the "scrollY" setting. If I remove that, the columns line up correctly both when the table is initially shown and when the dialog is resized. I would like to keep the scrollY setting, so if someone could still point me to the datatable column sort/resize code that would be great.