Jquery DataTable：表头出现两次

Question

我正在使用 Jquery DataTable 来显示数据。

<style type="text/css" title="currentStyle">
    @import '../css/demo_page.css';
    @import '../css/demo_table.css';
</style>
<script type="text/javascript" language="javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../scripts/jquery.dataTables.js"></script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#example1').dataTable({
            "bAutoWidth": false,
            "sScrollX": "100%",
            "bPaginate": false
        });
    });
</script>                                                   

<div id="demo">
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example1" >
        <thead>
            <tr>
                <th>Query GeneID</th>
                <th>Hit GeneID</th>
                <th>EXON</th>
                <th>Percentage</th>
                <th>Align Length</th>
                <th>No. of Mismatch</th>
                <th>Gaps</th>
                <th>Start Query Gene</th>
                <th>End Query Gene</th>
                <th>Hit Gene Start </th>
                <th>End Gene Start</th>
                <th>E-Value</th>
                <th>Bit-Score</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> AA1</td>
                <td>AA3</td>
                <td>AAAAAAAAAAAAA</td>
                <td>AA3</td>
                <td> AA1</td>
                <td> AA1</td>
                <td> AA1</td>
                <td> AA1</td>
                <td> AA1</td>
                <td> AA1</td>
                <td>AA1</td>
                <td>AA1</td>
                <td>AA1</td>
            </tr>
        </tbody>
    </table>
</div>

当我尝试点击页面时，会显示数据，<th> 中的所有字段都出现两次。 如果我删除：

"bAutoWidth": false,
"sScrollX": "100%",
"bPaginate": false

然后标题显示正确，我想保持滚动启用以使数据能够滚动。

你能告诉我哪里出错了。

谢谢， 卡皮尔

Answer 1

我在 MVC 中遇到过类似的情况，每次从弹出窗口更新表格时，页眉和页脚都会重复。

问题原来是脚本的重复：

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

上面的脚本在页面和弹出窗口中都有。当我从弹出窗口中删除它时，页眉和页脚停止重复。

Answer 2

遇到了同样的问题。

这对我有用：

"initComplete": function(settings, json) {
    $('.dataTables_scrollBody thead tr').css({visibility:'collapse'});
}

或在 CSS 中：

div.dataTables_scrollBody thead {           
    display: none;
}

Answer 3

包括这种风格：

div.FixedHeader_Cloned th,
div.FixedHeader_Cloned td {
    background-color: white !important;
}