Question

我有一个带有DataTable固定标题的表，其中每个单元格都包含一个日期，并且在表主体中有一些行以及紧随其后的数据标题。这些行的td带有colspan。我创建了一个jsFiddle here来说明这种情况。这是我的表结构的一个示例：

<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
    });
});

我希望在滚动下面的数据时在日期标题下固定带有“标题”的垂直滚动行，并且当滚动到达新标题时，以前的标题被隐藏，并在固定标题中替换为新标题。我该怎么做？谢谢

数据表-在垂直滚动期间保持主体中的某些行固定

0 个答案: