数据表头没有修复？建议我解决这个问题？答案

【问题标题】：Datatable header is not fixing? suggest me solution for this problem?数据表头没有修复？建议我解决这个问题？
【发布时间】：2018-12-03 00:23:29
【问题描述】：

我使用 jquery Datatable 并且表格是滚动数据表。我已经尝试了很多时间以不同的方式修复数据表标题，但标题没有修复任何人都可以帮助我修复这个问题。我添加了表格和数据表的代码和脚本。

这是表格的html代码

 <table cellpadding="0" cellspacing="0" border="0" class="table table-bordered table-striped tblquick " id="Phone_Table">
                                            <thead class="font-weight-light">
                                                <tr>

                                                    <th width="100px"> Numbers</th>
                                                    <th width="100px">Edit</th>
                                                    <th width="100px">Delete</th>

                                                </tr>
                                            </thead>
                                            <tbody id="Phone_TableBody">

                                                @foreach (var item in Model.NumberList)
                                                {

                                                    <tr>
                                                        <td width="100px" style="font:small">@item.PHONE_NUMBER</td>
                                                        <td width="100px">
                                                            <a class="Update" href="#">Update</a>
                                                        </td>
                                                        <td width="100px"><a href="#">Delete</a></td>
                                                    </tr>
                                                }

                                            </tbody>
                                        </table>

这是我用来修复数据表头和数据表的脚本

  @section scripts{
            <script src="~/Scripts/DataTables/jquery.datatables.js"></script>
            <script src="~/Scripts/DataTables/datatables.bootstrap.js"></script>
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
            <link rel="stylesheet" type="text/css" href="https://code.jquery.com/jquery-3.3.1.js">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
            <script src="~/Scripts/jquery.validate.js"></script>
            <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

这是

的数据表代码

          var table = $('#Phone_Table').DataTable({
                    "bAutoWidth": false,

                    "bScrollCollapse": true,
                    "responsive": true,

                    "fixedHeader": true,

                    "searching": true,


                    "bDestroy": true,
                    "dom": "<'row'<'col-lg-12'tr>>" +
                    "<'row'<'col-lg-3'l><'col-lg-12'p>>",
                    "oLanguage": {
                        "sLengthMenu": "_MENU_ ",
                        "fixedHeader": true,
                        "fixedHeader": {
                            header: true,

                        }


                    },

                });
    }

【问题讨论】：

标签： jquery datatable

【解决方案1】：

你的 js 和 css 导入搞砸了

你在css链接中导入js文件

例如：

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/jquery-3.3.1.js">

这里是Datatable doc for fixed header

还有working fiddle

首先将脚本部分中的 css 和 js 替换为此

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>

【讨论】：