当前位置：首页 > 文章列表 > 文章 > 前端 > DataTable固定首行设置教程

DataTable固定首行设置教程

2025-09-13 19:12:48 0浏览收藏

还在为 DataTables 表格首行固定发愁吗？本文详细讲解了如何利用 DataTables 库，巧妙地将表格首行固定置顶，即使排序也能始终保持在顶部！无需复杂的代码，只需简单几步：将需要固定的行移至 `

` 标签，配合 `display: table-row-group` 样式，并初始化 DataTables，就能轻松实现。本文提供完整代码示例，包括 HTML 结构调整、CSS 样式定义以及 DataTables 初始化设置，助你快速掌握 DataTables 固定首行技巧，提升用户体验。立即学习，让你的表格更具实用性！

如何在 DataTable 中固定首行置顶

本文介绍了如何使用 DataTables 库实现固定表格首行置顶的功能，即使在对表格进行排序时，首行也能始终保持在顶部。通过将需要固定的行添加到标签中，并配合 CSS样式，可以轻松实现这一需求。本文提供了详细的代码示例和步骤说明，帮助开发者快速掌握该技巧。

在 DataTables 中，有时我们需要将表格的某一行（例如，汇总行或平均值行）固定在顶部，使其始终可见，不受排序操作的影响。这种效果可以通过将该行移动到标签中来实现。标签通常用于放置表格的页脚，但在这里，我们利用它来实现固定首行的目的。

实现步骤：

修改 HTML 结构： 将要固定的首行从移动到中。确保位于和之间。

<table id="tableSla" class="table table-condensed table-bordered table-hover text-center"   style="max-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>

注意： style="display: table-row-group" 这个样式是必须的，否则的样式可能无法正确显示。

初始化 DataTables： 使用 DataTables 初始化表格。在这个例子中，我们设置了 pageLength，fixedHeader 和 aaSorting 等属性。

$(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");
            }
        }
    });
});

CSS 样式： 定义 CSS 样式来美化固定的行。在这个例子中，我们使用了 .average-css 类来设置背景颜色、字体颜色和字体粗细。
```
.average-css {
    font-weight: 600 !important;
    background-color: #333 !important;
    color: white !important;
}
```

完整代码示例：

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

<head>
  <meta charset="UTF-8">

  <!-- Meta to not put the web page in the browser cache -->
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-control" content="no-cache" />

  <!-- Meta refesh ths page automatically - in sec. -->
  <meta http-equiv="refresh" content="240">

  <!-- set CDN for datatable librairie -->
  <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>
  <!-- call librairie datatable and set columns order -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body style="font-family: colibri, Arial, Helvetica, sans-serif;">

  <!-- Title and update -->
  <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 -->
  <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>

  <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>
</body>

</html>

注意事项：