如何在 DataTables 中固定首行置顶-html教程-PHP中文网

如何在 datatables 中固定首行置顶

本文档介绍了如何在 DataTables 表格中实现首行固定置顶的效果，即使在进行排序操作时，首行也能始终保持在表格顶部。通过修改 HTML结构，将需要固定的行放置在 <tfoot> 标签内，可以轻松实现这一功能，同时保持表格的排序和其他 DataTables 功能的正常运作。

使用 <tfoot> 标签固定 DataTables 首行

DataTables 是一个功能强大的 jQuery 插件，用于增强 HTML 表格的功能，例如排序、分页、搜索等。有时候，我们需要将表格的首行固定在顶部，以便用户始终能够看到关键信息，例如平均值、总计等。一种简单有效的方法是使用 <tfoot> 标签。

步骤详解

HTML 结构调整:

将需要固定在顶部的行从 <tbody> 移动到 <tfoot> 中。 <tfoot> 标签通常用于放置表格的页脚信息，但在这里，我们利用它的特性来实现固定首行的效果。确保 <tfoot> 位于 <tbody> 之前。

<table id="tableSla" class="table table-condensed table-bordered table-hover text-center" style="font-size: 14px; width:100%">
    <thead class="table-secondary">
        <tr>
            <th style="text-align:center">Process</th>
            <th style="text-align:center">PC10519</th>
            <th style="text-align:center">PC10520</th>
            <th style="text-align:center">PC10523</th>
            <th style="text-align:center">PC0524</th>
        </tr>
    </thead>
    <tfoot style="display: table-row-group">
        <td class="average-css" style="text-align:left;padding:5px;padding-left:10px;">Average_SLA</td>
        <td class="average-css" style="text-align:center; padding:5px;">97.94 %</td>
        <td class="average-css" style="text-align:center; padding:5px;">98.29 %</td>
        <td class="average-css" style="text-align:center; padding:5px;">97.28 %</td>
        <td class="average-css" style="text-align:center; padding:5px;">99.08 %</td>
    </tfoot>
    <tbody>
        <tr>
            <td style="text-align:left;padding:5px;padding-left:10px;">Process#1</td>
            <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
            <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
            <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
            <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
        </tr>
        </tbody>
</table>

登录后复制

CSS 样式 (可选):

行者AI
行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

为了使固定的行更加醒目，可以添加自定义 CSS 样式。在示例中，.average-css 类用于设置背景颜色、字体颜色和粗细。
```
.average-css {
    font-weight: 600 !important;
    background-color: #333 !important;
    color: white !important;
}
```
登录后复制

DataTables 初始化:

使用 jQuery 初始化 DataTables。可以根据需要配置 DataTables 的各种选项，例如分页大小、排序等。在这个例子中，aaSorting: [] 用于禁用初始排序。 columnDefs 用于设置列宽。

$(document).ready(function() {
    var table = $("#tableSla").DataTable({
        pageLength: 25,
        fixedHeader: false,
        aaSorting: [],
        columnDefs: [
            {
                "width": "20%",
                "targets": 0
            },
        ],
        createdRow: function(row, data, index) {
            if (data[0] == "Average_SLA") {
                $(row).addClass("average-css");
            }
        }
    });
});

登录后复制

完整代码示例

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta http-equiv="refresh" content="240">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/r-2.2.2/dt-1.10.18/datatables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.bootstrap.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/r-2.2.2/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/sorting/absolute.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
    <style>
        .average-css {
            font-weight: 600 !important;
            background-color: #333 !important;
            color: white !important;
        }
    </style>
    <script>
        $(document).ready(function() {
            var table = $("#tableSla").DataTable({
                pageLength: 25,
                fixedHeader: false,
                aaSorting: [],
                columnDefs: [
                    {
                        "width": "20%",
                        "targets": 0
                    },
                ],
                createdRow: function(row, data, index) {
                    if (data[0] == "Average_SLA") {
                        $(row).addClass("average-css");
                    }
                }
            });
        });
    </script>
</head>

<body style="font-family: colibri, Arial, Helvetica, sans-serif;">
    <div class="row" style="padding:0; font-size:13px;">
        <h3 class="col-md-6" align="left">SLA</h3>
        <p class="col-md-6" align="right" style="color:#696969">Last update : 2022-06-03 10:08</p>
    </div>

    <table id="tableSla" class="table table-condensed table-bordered table-hover text-center" style="font-size: 14px; width:100%">
        <thead class="table-secondary">
            <tr>
                <th style="text-align:center">Process</th>
                <th style="text-align:center">PC10519</th>
                <th style="text-align:center">PC10520</th>
                <th style="text-align:center">PC10523</th>
                <th style="text-align:center">PC0524</th>
            </tr>
        </thead>
        <tfoot style="display: table-row-group">
            <tr>
                <td class="average-css" style="text-align:left;padding:5px;padding-left:10px;">Average_SLA</td>
                <td class="average-css" style="text-align:center; padding:5px;">97.94 %</td>
                <td class="average-css" style="text-align:center; padding:5px;">98.29 %</td>
                <td class="average-css" style="text-align:center; padding:5px;">97.28 %</td>
                <td class="average-css" style="text-align:center; padding:5px;">99.08 %</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td style="text-align:left;padding:5px;padding-left:10px;">Process#1</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
            </tr>
            <tr>
                <td style="text-align:left;padding:5px;padding-left:10px;">Process#2</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.34 %</td>
                <td style="text-align:center; padding:5px;">No Sla</td>
                <td style="text-align:center; padding:5px;">No Sla</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
            </tr>
            <tr>
                <td style="text-align:left;padding:5px;padding-left:10px;">Process#3</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.35 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.23 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.35 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.67 %</td>
            </tr>
            <tr>
                <td style="text-align:left;padding:5px;padding-left:10px;">Process#4</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
            </tr>
            <tr>
                <td style="text-align:left;padding:5px;padding-left:10px;">Process#5</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.32 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.43 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.44 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.83 %</td>
            </tr>
            <tr>
                <td style="text-align:left;padding:5px;padding-left:10px;">Process#6</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.34 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">99.76 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">97.99 %</td>
                <td style="text-align:center; padding:5px;color:red;background-color:#ffc7ce">98.41 %</td>
            </tr>
            <tr>
                <td style="text-align:left;padding:5px;padding-left:10px;">Process#7</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
                <td style="text-align:center;padding:5px;color:green;background-color:#ddf5df">100.00 %</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

登录后复制