我正在加载一个PHP页面，其中包含一个使用DataTables固定头功能的表。我似乎不能得到的表是在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;
}

如何解决此问题？

8条答案

按热度按时间

b0zn9rqh1#

Bootstrap 4用户

如果您正在使用Bootstrap类到表，则可能会遇到此宽度问题。要解决此问题，请使用datatable默认选项"autoWidth": false
启用或禁用自动列宽计算。如果表的宽度是使用

$('#example').dataTable( {
    "autoWidth": false
});

https://datatables.net/reference/option/autoWidth

赞(0）回复(0）举报 2023-06-29

dxxyhpgq2#

我想我已经解决了这个问题。我用的是老建筑。
在升级到10.1并遵循下面的表宽说明后，我解决了我的问题。
我添加了（width=“100%”）到我的表标记，它现在保持在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" width="100%" border=1>

我用这个问题的答案来形成我的回答
https://stackoverflow.com/a/23842795/1691103
示例
http://www.datatables.net/examples/basic_init/flexible_width.html

klh5stk13#

我也遇到了同样的问题，尝试了上述所有的解决方案，但都没有成功。经过几个小时的搜索，我发现引导类“table-responsive”在DataTable上有问题。
所以解决办法是-
只需要从表中删除“table-responsive”类。
所以表的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>

wlp8pajw4#

我读了所有的答案。他们都没有提到这个简单的方法：
只需将style="width:100%"添加到table标记

<table style="width:100%" class="table table-striped- table-bordered table-hover table-checkable" id="firstmile-tbl" >

h7wcgrx35#

对我来说，在Bootstrap 4.4.1不幸德克斯特解决方案没有工作。解决方案是在表中添加一个w-100类。

fjnneemd6#

如果你使用的是Bootstrap，不要忘记将table类添加到表中。

<table id="my_table" class="table">
    ...
</table>

rggaifut7#

对我来说，添加css选择器到表的父div就像一个魅力！

div.dataTables_wrapper {
width:100% !important;
}

zengzsys8#

我正在使用Bootastrap 4，我想在card中显示响应表。在我的例子中，从父div元素中删除table-responsive和row类就成功了。示例如下：
姓名首字母：

<div class="card">
    <div class="card-body">
        <div class="row">
            <p>Responsive Table</p>
            <table class="table table-bordered table-striped table-hover table-responsive"></table>
        </div>
    </div>
</div>

变更为：

<div class="card">
    <div class="card-body">
        <div class="">
            <p>Responsive Table</p>
            <table class="table table-bordered table-striped table-hover"></table>
        </div>
    </div>
</div>

jquery DataTables.js -在页面加载时，表未加载初始100%全宽

8条答案

Bootstrap 4用户

相关问题

热门标签

最新问答