Question

我正在使用jquery Datatable，并且该表是滚动数据表。我尝试了很多时间以不同的方式修复datatable标头，但标头没有修复任何人都可以帮助我修复此isuue.i添加了table和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,

                        }


                    },

                });
    }

Answer 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>

数据表头不固定？建议我解决这个问题？

1 个答案: