DataTables.js - 表格在页面加载时未加载初始 100% 全宽
Posted
技术标签:
【中文标题】DataTables.js - 表格在页面加载时未加载初始 100% 全宽【英文标题】：DataTables.js - Table not loading initial 100% full width on page load 【发布时间】：2016-04-25 17:18:44 【问题描述】：我正在使用 DataTables 固定标题功能加载带有表格的 php 页面。在页面呈现时，我似乎无法让表格处于 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>]
[<a style="text-decoration: underline; color: black" href="openactionitems.php"><b>Open Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="completedactionitems.php"><b>Completed Action Items</b></a>]
[<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>▼</white>"; else if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "ASC") echo "<white>▲</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>▼</white>"; else if ($orderBy == $col && $dir == "ASC") echo "<white>▲</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'"; ?>>
</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;
我该如何解决这个问题？
【问题讨论】：
如果需要，我可以在页面同步渲染时发布表格状态的图像。 拜托了！ （更多字母。） 您确实需要发布整个页面代码 + css，因为数据表默认应以 100% 呈现。在我看来，100% 并不是你认为的 100% 的样子。唯一知道的方法是查看整个页面。 谢谢你，我已经更新了我的帖子。 【参考方案1】：对于 Bootstrap 4 用户
如果您在表中使用 Bootstrap 类，您可能会遇到这个宽度问题。要解决此问题，请使用数据表默认选项 "autoWidth": false
启用或禁用自动列宽计算。这可以是 禁用作为优化（它需要有限的时间来 计算宽度）如果表格宽度使用
$('#example').dataTable(
"autoWidth": false
);
https://datatables.net/reference/option/autoWidth
【讨论】：
"autoWidth": false 似乎已经存在于原始代码中 @Vahe 是的，我注意到了，但我的答案适用于 Bootstrap 4，没有额外的代码。也经过测试。 我注意到 Bootstrap 4 注释晚了，感谢您的回答 @Vahe 跟我一样情况 不确定它是否与引导程序 4 相关联，因为我的是 4.4，但按照 Dexter 的建议解决了问题。他是个传奇！【参考方案2】：我相信我已经解决了这个问题。我使用的是旧版本。
升级到 10.1 并遵循下面的表格宽度说明后，我解决了我的问题。
我在表格标签中添加了 ()，现在它保持在 100%
所以不是
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
我替换了样式width: 1000，它只是将绝对宽度设置为1000像素（我忘了添加px单位后缀），百分比值为100% `width='100%' 和解析表标签会读取。
<table id="summary_table" class="display nowrap" border=1>
我使用这个问题的答案来形成我的回答
https://***.com/a/23842795/1691103
例子
http://www.datatables.net/examples/basic_init/flexible_width.html
【讨论】：
【参考方案3】：我遇到了同样的问题并尝试了上述所有解决方案，但没有运气。 经过几个小时的搜索，我发现引导类“table-responsive”的DataTable有问题。
所以解决方案是-
只需从表格中删除“表格响应”类即可。
所以表格的 HTML 应该是这样的 -
<table class="table table-striped table-hover table-sm" id="followup-table">
<thead>
<tr class="text-white">
<th>#</th>
<th>Follow Up On</th>
<th>Name</th>
<th>Phone No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4 Jun 2021</td>
<td>Mrityunjay Mishra</td>
<td>87838734</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function()
$('#followup-table').DataTable();
);
</script>
【讨论】：
【参考方案4】：我阅读了所有答案。他们都没有提到这种简单的方法：
只需将style="width:100%" 添加到table 标记
<table style="width:100%" class="table table-striped- table-bordered table-hover table-checkable" id="firstmile-tbl" >
【讨论】：
这与我最初编写的意图几乎相似，但它成功地使用了 table 标记内的显式样式定义。我认为它与我的投票完全不同，因为它独特地回答了这个问题。谢谢！ @VaheJabagchourian 当然你的回答对vote up 有好处，谢谢你的赞美【参考方案5】：
不幸的是，Dexters 解决方案在 Bootstrap 4.4.1 中对我来说不起作用。解决方法是在表中添加一个 w-100 的类。
【讨论】：
【参考方案6】：如果您使用的是 Bootstrap，请不要忘记将 table 类添加到您的表中。
<table id="my_table" class="table">
...
</table>
【讨论】：
【参考方案7】：对我来说，将 css 选择器添加到表的父 div 就像一个魅力！
div.dataTables_wrapper
width:100% !important;
【讨论】：
以上是关于DataTables.js - 表格在页面加载时未加载初始 100% 全宽的主要内容，如果未能解决你的问题，请参考以下文章