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

有同样的问题。

这对我有用：

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

或在CSS中：

div.dataTables_scrollBody thead {           
    display: none;
}

Answer 2

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

问题原来是脚本的重复：

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

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

Answer 3

包括这种风格：

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

Jquery DataTable：表标题出现两次

3 个答案: