DataTables.js - 表不加載初始頁面加載時100％全寬

我正在使用DataTables固定標頭功能加載帶有表格的PHP頁面。我似乎無法讓頁面呈現時100％的頁面加載。它從壓縮（加載時）開始，然後展開（一次頁面渲染）。DataTables.js - 表不加載初始頁面加載時100％全寬

我試圖通過在php中輸出緩衝來解決這個問題，但無法獲得壓縮的效果，然後擴展消失。

初始化代碼（在腳本的底部）

$(document).ready(function() { 
    $('#summary_table').DataTable({ 
     "scrollY": 400, 
     "scrollX": true, 
     "bSort": false, 
     "bPaginate": false, 
     "autoWidth": false 
    }); 

    $(".dataTables_wrapper").css("width","100%"); 
});

編輯：

（表被加載期間壓縮，但隨後進行到100％）

PHP

<html> 
<head> 
    <title>Action Item Summary</title> 
    <link rel="stylesheet" type="text/css" href="../css/style.css"/> 
    <style> 
     thead th { 
      background-color:#0038a8; 
      font-weight: bold; 
      font-style: italic; 
      color: white; 
      text-align: left; 
     } 

     table:not(#header):not(#menu):not(#find) { 
      background-color: white; 
      width: 100%; 
     } 
     td { 
      width: auto; 
      min-width: auto; 
      white-space: nowrap; 
     } 
     input[type='text'] { 
      width: 50%; 
      min-width: 100%; 
     } 

     span { 
      white-space: nowrap; 
     } 

     span.late{ 
      color: red; 
     } 
     thead tr td a{ 
      color: white; 
     } 
     th a:hover 
     { 
      cursor: pointer; 
      text-decoration: underline; 
     } 
    div.dataTables_wrapper { 
     width: 100%; 
     margin: 0 auto; 
    } 
    div.dataTables_scrollBody table#summary_table { 
     width: 100% !important; 
    } 

    table.dataTable tr.odd { background-color: #dae1e9; } 
    table.dataTable tr.even { background-color: white; } 

    </style> 

    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="../js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="../js/table.js"></script> 
    </head> 
    <body> 
<? $pageTitle="All Action Items (".count($resAll).")"; include_once('../shared/pageheader.php'); ?> 
<?if (isset($_SESSION['filteron']) && $_SESSION['filteron'] == true):?><div style="position:relative; float:right; display: inline; font-weight: bold; color:red; font-size: 12pt; background-color: lightgray; margin-right: 10"> Filter On </div><br /><?endif;?> 
<form method="POST" action="/actionitems/viewactionitem.php"> 
<table id="find" border="1"> 
<tr> 
    <td class="label">Find Action Item</td> 
    <td style="width:100 !important"><input type="text" id="id" name="id" value=""></input></td> 
    <td><input type="submit" value="View" /></td> 
    <td><input type="button" value="Find" onclick="jumpTo($('#id').val())"+/></td> 
</tr> 
</table> 
</form> 
<table style="background-color: transparent"> 
<tr> 
    <td id="left" align="left"> 
     <? if($_SESSION['userrole'] == 'Admin'): ?>[<a style="text-decoration: underline; color: black" href="newactionitem.php"><b>Add New Action Item</b></a>] <? endif;?> 
    </td> 
    <td id="middle" align="middle"> 
     [<a style="text-decoration: underline; color: black" href="allactionitems.php"><b>All Action Items</b></a>] &nbsp; 
     [<a style="text-decoration: underline; color: black" href="openactionitems.php"><b>Open Action Items</b></a>] &nbsp; 
     [<a style="text-decoration: underline; color: black" href="completedactionitems.php"><b>Completed Action Items</b></a>] &nbsp; 
     [<a style="text-decoration: underline; color: black" href="closedactionitems.php"><b>Closed Action Items</b></a>] 
    </td> 
    <td id="right"> 
    </td> 
</tr> 
</table> 
<form style="display:inline" id="summaryform" method="POST" action="allactionitems.php"> 
<div class="summary_table" style="<? if(count($resAll)> 23): ?>height:500;<?endif;?> overflow-y:auto"> 
<table id="summary_table" class="display nowrap" style="width: 1000" border=1> 
    <thead class="header"> 
     <tr> 
      <? foreach ($cols as $cidx=>$col): ?> 
       <? if (!in_array($col, $hideCols)): ?> 
        <th> 
        <?if (in_array($col, $categoryNames)):?> 
         <a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$manageActionItems->getCategoryName($col)?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=$manageActionItems->getCategoryName($col)?></a><? if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "DESC") echo "<white>&#9660;</white>"; else if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "ASC") echo "<white>&#9650;</white>"; else echo "<span style='display: inline-block; width: 13'></span>";?></td> 
        <? else:?> 
         <a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$col?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=($col=="ActionItemID")?"ID": $col?></a><? if ($orderBy == $col && $dir == "DESC") echo "<white>&#9660;</white>"; else if ($orderBy == $col && $dir == "ASC") echo "<white>&#9650;</white>"; else echo "<span style='display: inline-block; width: 13'></span>"; ?> 
        <?endif;?> 
        </th> 
       <? endif; ?> 
      <? endforeach; ?> 
      <th> 
       View 
      </th> 
      <th> 
       Edit 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <? foreach($resAll as $idx=>$row): ?> 
     <? //echo"<pre>"; var_dump($row); echo"</pre>"; ?> 
     <tr id="row<?=$row['ActionItemID']?>"> 
      <? foreach ($cols as $cidx=>$col): ?> 
       <? if (!in_array($col, $hideCols)): ?> 
          <td <? if($orderBy == $col) echo "class='sort'"; ?>> 
          &nbsp; 
        </td> 
       <? endif; ?> 
      <? endforeach; ?> 
      <td> 
       <a href="viewactionitem.php?id=<?=$row['ActionItemID']?>">View</a> 
        <!--input type="submit" value="View" style="width:60;height:20;border:none; font-weight: bold"/--> 
       </form> 
      </td> 
      <td> 
      <? if(($_SESSION['userrole'] == 'Admin' && $_SESSION['userrole'] == 'Admin') || isset($_SESSION['userid']) &&($row['OwnerID'] == $_SESSION['userid'] || $row['AltOwnerID'] == $_SESSION['userid'])):?> 
       <a href="editactionitem.php?id=<?=$row['ActionItemID']?>">Edit</a> 
       <? endif; ?> 
        <!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /--> 
       </form> 
      </td> 
     </tr> 
    <? endforeach; ?> 
    </tbody> 
</table> 
</div> 
</form> 
<script> 
$(document).ready(function() { 
    $('#summary_table').DataTable({ 
     "scrollY": 400, 
     "scrollX": true, 
     "bSort": false, 
     "bPaginate": false, 
     "autoWidth": false 
    }); 

    $(".dataTables_wrapper").css("width","100%"); 
}); 
</script> 
</body> 
</html>

CSS

div#splash 
{ 
    background-color:#d8d8d8; 
} 

body 
{ 
    font-family: arial; 
} 

textarea 
{ 
    width: 100%; 
    max-width: auto; 
    height: 100px; 
    max-height: 85px; 
    overflow-y:scroll; 
    resize: none; 
    font-family: inherit; 
} 

html * :not(h1):not(h2) 
{ 
    font-size: 10pt; 
} 

body 
{ 
    margin: 0px;  
    background-image: url('/img/custom_back.gif'); 
} 

h1, h2 
{ 
    font-family: arial; 
    text-align: center; 
} 

h3 
{ 
    font-size: 75%; 
} 

table.data tr td:not(.label) 
{ 
    background-color:white; 
} 

td#left 
{ 
    width: 25%; 
} 

td#right 
{ 
    width: 25%; 
} 

td#middle 
{ 
    width: 50%; 
} 

td.label 
{ 
    font-weight: bold; 
    font-style: italic; 
} 

table#find tr td.label, 
table.data tr td.label 
{ 
    background-color:#0038a8; 
    color: white; 
} 

table.data tr td.label, 
table.data:not(#details) tr td 
{ 
    width: 25%; 
} 

table.data 
{ 
    margin: 0 auto; 
} 

table#header 
{ 
    width: 100% !important; 
} 

table#header tr td 
{ 
    vertical-align: middle; 
    background-color: transparent; 
} 


input[type=submit] 
{ 
    margin: 0 auto; 
} 

td 
{ 
    vertical-align: middle; 
} 
div#header div 
{ 
    display:inline-block; 
} 

div#title 
{ 
    font-style: italic; 
} 

img#logo 
{ 
    width: 95px; 
    height: 95px; 
} 

table#toolname td 
{ 
    font-weight: bold; 
    font-size: 15px; 
} 

table#menu 
{ 
    background-color: #0038a8; 
} 

.required 
{ 
      border-style:solid; 
      border-width:2px; 
      border-color:red; 
} 

td > div:not(.filterinput):not(.cell) 
{ 
    height: 85px; 
    max-height: 85px; 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

td.sort 
{ 
    background-color: lightgray; 
}

請問該如何解決這個問題？

來源

2016-01-20 Vahe

如果需要當頁面正在同步渲染時，我可以發佈表格狀態的圖像。 – Vahe

請做！（更多信件） – cyberbit

您確實需要發佈整個頁面代碼+ css，因爲數據表應該在默認情況下以100％呈現。在我看來，100％並不是你認爲的100％。只有這樣才能知道是看到整個頁面。 –

我相信我解決了這個問題。我正在使用較舊的版本。

升級到10.1後，按照下面的表格寬度指令，我解決了我的問題。

我加入（寬度= 「100％」），以我的表代碼並將其現在保持在100％

鏈接

https://stackoverflow.com/a/23842795/1691103

例

http://www.datatables.net/examples/basic_init/flexible_width.html

來源

2016-01-20 04:28:26 Vahe

DataTables.js - 表不加載初始頁面加載時100％全寬

回答

相關問題