Php DataTables.js-表格在页面加载时未加载初始100%全宽
我正在加载一个PHP页面,其中包含一个使用DataTables固定标题功能的表。当页面呈现时,我似乎无法使表处于页面负载的100%。它以压缩(加载时)开始,然后扩展(页面呈现时) 我试图通过php中的输出缓冲来解决这个问题,但无法获得压缩和扩展的效果 初始化代码(在脚本底部) 编辑: (表格在加载期间被压缩,但随后变为100%。) PHPPhp DataTables.js-表格在页面加载时未加载初始100%全宽,php,jquery,datatables,Php,Jquery,Datatables,我正在加载一个PHP页面,其中包含一个使用DataTables固定标题功能的表。当页面呈现时,我似乎无法使表处于页面负载的100%。它以压缩(加载时)开始,然后扩展(页面呈现时) 我试图通过php中的输出缓冲来解决这个问题,但无法获得压缩和扩展的效果 初始化代码(在脚本底部) 编辑: (表格在加载期间被压缩,但随后变为100%。) PHP <html> <head> <title>Action Item Summary</title>
<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>
我如何解决这个问题?我相信我已经解决了这个问题。我使用的是旧版本 升级到10.1并遵循下面的表格宽度说明后,我解决了我的问题 我将(width=“100%”)添加到我的表标记中,现在它保持在100% 链接 范例
适用于Bootstrap 4用户 如果在表中使用引导类,则可能会遇到此宽度问题。要解决此问题,请使用datatable默认选项“autoWidth”:false 启用或禁用自动列宽计算。这可能是 作为优化禁用(需要有限的时间 如果使用传递表格宽度,则计算宽度)
对于我来说,在Bootstrap 4.4.1中不幸的是,Dexters解决方案不起作用。解决方案是将一个w-100类添加到表中。如果您正在使用,请不要忘记将
表
类添加到您的表中
...
对于我来说,将css选择器添加到表的父div中非常有效
<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>
我也面临着同样的问题,尝试了以上所有的解决方案,但没有成功。 经过数小时的搜索,我发现引导类“TableResponsive”与DataTable有问题 所以解决办法是- 只需从表中删除“表响应”类 因此,表的HTML应该如下所示-
#
跟进
名称
电话号码
1.
2021年6月4日
米什拉先生
87838734
$(文档).ready(函数(){
$(“#后续表”).DataTable();
} );
如果需要,我可以发布表格状态的图像,因为页面正在同步呈现。请这样做!(更多字母。)您确实需要发布整个页面的代码+css,因为数据表应该在defaut以100%的速度呈现。在我看来,100%并不是你想象的100%。唯一知道的方法是查看整个页面。谢谢,我已经更新了我的帖子。“autoWidth”:false似乎已经出现在原文中了code@Vahe是的,我注意到了,但是我的答案在Bootstrap4上运行,没有额外的代码。我也测试过了。我注意到Bootstrap 4的提示太晚了,谢谢你的帮助answer@Vahe和meNot确定它是否链接到bootstrap 4相同的条件,因为我的是4.4,但问题是按照Dexter的建议解决的。他是个传奇人物!
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;
}
$('#example').dataTable( {
"autoWidth": false
});
div.dataTables_wrapper {
width:100% !important;
}
<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>