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