Datatables - держите некоторые строки в теле фиксированными во время вертикальной прокрутки - PullRequest
Новая
       17

Datatables - держите некоторые строки в теле фиксированными во время вертикальной прокрутки

0 голосов
/ 24 сентября 2018

У меня есть таблица с фиксированным заголовком DataTable, в которой каждая ячейка содержит дату, а в теле таблицы у меня есть несколько строк с заголовком для данных, которые находятся непосредственно ниже.Эти строки имеют тд с кольспаном.Я создал jsFiddle здесь , чтобы проиллюстрировать ситуацию.Это пример структуры моей таблицы: 

<table class="dataTable table table-striped table-bordered" id="example">
    <thead>
        <tr>
            <th>Sep 24</th><th>Sep 25</th><th>Sep 26</th><th>Sep 27</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="4">Title 1</td><td style="display:none;"></td><td style="display:none;"></td><td style="display:none;"></td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td colspan="4">Title 2</td><td style="display:none;"></td><td style="display:none;"></td><td style="display:none;"></td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td colspan="4">Title 3</td><td style="display:none;"></td><td style="display:none;"></td><td style="display:none;"></td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td colspan="4">Title 4</td><td style="display:none;"></td><td style="display:none;"></td><td style="display:none;"></td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
        <tr>
            <td>One</td><td>Two</td><td>Three</td><td>Four</td>
        </tr>
    </tbody>
</table>

Это мой сценарий инициализации с данными: 

$(document).ready(function() {
    $('#example').DataTable({
        scrollY: '200px',
        fixedHeader: {
           header: true
        },
        "bLengthChange": false,
        "Filter": false,
        "Info": false,
        "paging": false,
        "ordering": false
    });
});

Я хочу, чтобы во время вертикальной прокрутки строки с «Заголовком» были исправлены взаголовок даты при прокрутке данных ниже, и когда прокрутка достигает нового заголовка, предыдущий заголовок был скрыт и заменен в фиксированном заголовке новым заголовком.Как я могу сделать это?Спасибо

...