Question

我的网站上有一个工作数据表，但最初的问题是有很多列和侧面滚动会带走数据表的搜索功能，页码和条目数选项。我将包装代码添加到我的数据表JS代码中，如下所示：

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('#mytable').DataTable();
            $("#mytable").wrap("<div style='overflow-x: auto' />");
        });
    }(jQuery));
</script>

这使得数据表选项得到修复，并且只会对表格内容进行侧面滚动（这就是我想要的），但它看起来像这样：

所以，这个功能现在正常工作但是我想找到一种方法让表格成为全宽度并且数据表选项位于顶部和下面，就像之前一样，而不是表格是夹在数据表选项之间。

这是完整的表格代码：

<div class="dashboardTable" style="width:920px;">

    <table id="mytable" style="border: 1px solid #468BBD; border-collapse: collapse; width:100%; margin:0 auto;">
        <thead>
            <tr style="border: 1px solid #468BBD;">
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumDepart</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">highSideMIUNumArriv</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">highSideMIUNumDepart</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">locationNotes</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">locationComments</th>
            </tr>
        </thead>
        <tbody>
            <?php
                while($row = mysqli_fetch_array($result1)){
            ?>
            <tr>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumDepart'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumArriv'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumDepart'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationNotes'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationComments'];?>&nbsp;</td>
            </tr>
            <?
                }
            ?>
        </tbody>
    </table>

</div>

<script type="text/javascript"    src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('#mytable').DataTable();
            $("#mytable").wrap("<div style='overflow-x: auto' />");
        });
    }(jQuery)); 
</script>

Answer 1

将您的表放在 <div class="table-responsive"> </div> 部分

中

数据库表和表内容未正确包装

1 个答案: