Wrong table layout on first show

Thallius

Hi,

I like to embed a datatable into a div which is absolute postioned. the structure of this div and the code for the datatable is (I am sorry its in PHP :-) :

        echo '<div id="selectTableEditDiv" class="editDiv" >';
        echo '<table class="editTitleTable" cellspacing="0" cellpadding="0"><tr><td class="editTitleCell">'.$title.'</td></tr></table>';
        echo '<table class="editTable"><tr><td>';

        echo '<div id="selectTableDiv" style="height: 320px">';
        echo '<table id="selectTable" cellpadding="0" cellspacing="0" border="0" class="display" id="selectTable"><thead><tr>';
        $index=0;
        foreach($dataArray as $data)
        {
            if($index==0)
                echo '<th style="border-top-left-radius: 6px;">'.$data.'</th>';
            elseif($index==count($dataArray)-1)
                echo '<th style="border-top-right-radius: 6px;">'.$data.'</th>';
            else
                echo '<th >'.$data.'</th>';
            $index++;
        }
        echo '</tr></thead><tbody><tr><td colspan="'.count($dataArray).'" class="dataTables_empty">'.$loadDataText.'</td></tr></tbody></table>';
        echo '</div>';
        echo '</td></tr>';
        echo '<tr>
                <td colspan="1">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="editButtonCell">
                                <input type="button" onclick="saveSystem()" class="editButton" value="'.$okText.'" />
                            </td>
                            <td class="editButtonCell">
                                <input type="button" onclick="cancelEditSystem()" class="editButton" value="'.$cancelText.'" />
                            </td>
                        </tr>
                    </table>
                </td>
              </tr>';
        echo '</table>';
        echo '</div>';

        echo '<script type="text/javascript" charset="utf-8">';
        echo '  var selectTable = null;
                $(document).ready(function()
                {
                    var content= $("#selectTableDiv");
                    selectTable=$("#selectTable").dataTable(
                    {
                        "sScrollY": content.height()-74-26,
                        "aLengthMenu": [[10, 25, 50, 100 , -1], [10, 25, 50, 100, "'.$allText.'"]],
                        "bProcessing": true,
                        "bServerSide": true,
                        "sAjaxSource": "./datasource/ds_sites.php",
                        "bStateSave": true
                    });
                });';
        echo 'var selectTableEditDiv= $("#selectTableEditDiv"); selectTableEditDiv.hide();  selectTableEditDiv.css("visibility","visible"); ';
        echo '</script>';

As you see the div is hidden first and will be faded in on a button click. When the div is visible, it looks like this

http://www.cbc-apps.com/test/datatable.png

When I click on any header to change the sort. the layout refreshes and everything looks fine. So I need a hint what to do to get the layout correct on startup.

Thanks in advance

Claus

allan

You need to call columns.adjust() when the table is made visible. This example shows that and explains way.

Allan

Thallius

Thx Allan,

perfect support like always.