Jquery DataTable: заголовки таблиц появляются дважды

Я использую 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

Затем заголовки отображаются правильно, я хочу, чтобы прокрутка была включена, чтобы можно было прокручивать данные.

Не могли бы вы сказать, где я делаю ошибку.

Спасибо, Капил.


jquery jquery-datatables
person KAPILP    schedule 05.12.2011    source источник
comment
Я получаю сообщение об ошибке java Script: Uncaught TypeError: Object #‹Object› не имеет метода 'outerWidth' в файле: jquery.dataTables.min.js   -  person KAPILP    schedule 05.12.2011
comment
Я не вижу проблемы, когда пытаюсь воспроизвести: live.datatables.net/adayaz /edit#javascript,html   -  person Greg Pettit    schedule 05.12.2011
comment
Спасибо, Грег, за ссылку, я обнаружил, что мне не хватает <script class="jsbin" src="../scripts/jquery.dataTables.nightly.js"></script> После включения этого кода он начал работать   -  person KAPILP    schedule 06.12.2011
comment
Возможный дубликат jQuery DataTables две строки в заголовке: имена столбцов первой строки и сортировка, фильтрация второй строки   -  person Bhavik Rathod    schedule 14.06.2017

Ответы (3)


arrow_upward
0
arrow_downward

Была такая же проблема.

Это сработало для меня:

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

или в CSS:

div.dataTables_scrollBody thead {           
    display: none;
}
person Prefijo Sustantivo    schedule 08.11.2016

arrow_upward
0
arrow_downward

У меня была аналогичная ситуация в MVC, где верхние и нижние колонтитулы дублировались каждый раз, когда таблица обновлялась из всплывающего окна.

Проблема оказалась в дублировании скрипта:

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

Приведенный выше скрипт был как на странице, так и во всплывающем окне. Когда я удалил его из всплывающего окна, верхние и нижние колонтитулы перестали дублироваться.

person Mick    schedule 18.02.2020

arrow_upward
-1
arrow_downward

Включите этот стиль:

div.FixedHeader_Cloned th,
div.FixedHeader_Cloned td {
    background-color: white !important;
}
person Srikanth Shet    schedule 17.01.2015