Datatable 的界面无法正常工作

如何解决Datatable 的界面无法正常工作

我刚刚添加了一个没有配置的数据表，这就是我的结果..我不知道为什么会发生这种情况。我已经尝试用 style="width100%"

覆盖 css

$(document).ready(function(){
  $('#department').DataTable();
});

<link href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<div class="row">
      <div class="col-sm-12">
        <div class="table-responsive">
                <h4>Department</h4>
                <table class="table table-hover" id="department" style="width:100%">
                    <thead>
                        <th>#</th>
                        <th>asd</th>
                    </thead>
                    <tbody>
                        <?PHP
                            foreach($department as $key => $value){
                                echo '<tr>
                                    <td>'.$value->id.'</td>
                                    <td>'.Department.'</td>
                                </tr>';
                            }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
  </div>

解决方法

问题中的固定代码片段显示了正确的输出。唯一的区别是它包括依赖资产，jQuery 和 DataTables。此外，DataTables 有一个 CSS 默认资产，已包含在固定代码段中。可能您在源代码中遗漏了这一点：

<link href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet"/>