文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

如何在 DataTable 中固定首行置顶

聖光之護
发布： 2025-08-17 16:34:00
原创
182人浏览过

如何在 datatable 中固定首行置顶

本文介绍了如何使用 DataTables 库实现固定表格首行置顶的功能，即使在对表格进行排序时，首行也能始终保持在顶部。通过将需要固定的行添加到

标签中，并配合 CSS样式，可以轻松实现这一需求。本文提供了详细的代码示例和步骤说明，帮助开发者快速掌握该技巧。

在 DataTables 中，有时我们需要将表格的某一行（例如，汇总行或平均值行）固定在顶部，使其始终可见，不受排序操作的影响。 这种效果可以通过将该行移动到

标签中来实现。 标签通常用于放置表格的页脚，但在这里，我们利用它来实现固定首行的目的。

实现步骤：

  1. 修改 HTML 结构： 将要固定的首行从

    移动到 中。 确保 位于 和 之间。
    <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>
    登录后复制

    注意： style="display: table-row-group" 这个样式是必须的，否则

    的样式可能无法正确显示。

  2. 初始化 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");
            }
        }
    });
});
    登录后复制

  3. CSS 样式： 定义 CSS 样式来美化固定的行。 在这个例子中，我们使用了 .average-css 类来设置背景颜色、字体颜色和字体粗细。

    .average-css {
    font-weight: 600 !important;
    background-color: #333 !important;
    color: white !important;
}
    登录后复制

    4. 完整代码示例：

    <!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>
    登录后复制

    注意事项：

    • 确保引入了 DataTables 的 CSS 和 JavaScript 文件，以及 jQuery 库。
    • 根据实际情况调整 CSS 样式，以满足项目的需求。
    • 如果表格数据是动态加载的，需要在数据加载完成后重新初始化 DataTables。

    总结：

    通过将需要固定的行添加到

    标签中，可以轻松实现在 DataTables 中固定首行置顶的功能。 这种方法简单有效，并且可以灵活地应用于各种表格场景。希望本文能帮助你解决在 DataTables 中固定首行的问题。

以上就是如何在 DataTable 中固定首行置顶的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
相关标签：
css bootstrap ai red JavaScript jquery css html display table tbody
来源：php中文网
收藏 点赞
上一篇：Angular Material Tooltip 长文本定位问题及解决方案 下一篇：HTML表单如何实现客户端验证？required属性怎么用？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
实现侧边导航栏同时只展开一个子菜单 本文将介绍如何修改现有的侧边导航栏代码，使其在任何时候只允许一个子菜单处于展开状态。我们将通过JavaScript来实现这一功能，确保用户体验的简洁性和一致性。核心思路是在点击新的子菜单时，先关闭当前已展开的子菜单，然后再展开新的子菜单。
2025-08-17 23:46:01
710
如何避免代码重复：JavaScript 问答网页优化实战 本文旨在解决在JavaScript问答网页开发中，因主题选择导致的代码重复问题。通过采用三元运算符和函数封装，我们将展示如何精简代码，提高可维护性，并为后续扩展提供更灵活的架构。核心在于动态确定数据源和选择项，从而避免为每个主题编写相似的代码块。
2025-08-17 23:24:34
216
如何避免代码重复：JavaScript 问答网页优化实践 本文旨在解决JavaScript问答网页开发中常见的代码重复问题。通过重构代码，利用三元运算符和函数封装，我们将简化代码逻辑，提高代码的可维护性和可扩展性。最终，你将学会如何避免在类似场景下重复编写相似的代码块，从而提高开发效率。
2025-08-17 23:06:26
152
JavaScript代码复用：避免重复编写问答网页逻辑 本文旨在解决在开发问答网页时，因主题增多而导致代码重复的问题。通过使用三元运算符，将原本针对不同主题（如生物、化学、物理）的相似代码逻辑进行整合，从而实现代码的复用，减少冗余，提高开发效率，并使代码更易于维护和扩展。
2025-08-17 23:02:15
238
表单中的主题定制怎么实现？如何动态修改表单的样式？ 表单的主题定制和动态样式修改核心在于结合CSS变量定义全局样式与JavaScript控制类名切换或变量更新来实现灵活的主题管理；具体通过在:root中定义如--primary-color等语义化CSS变量，利用JavaScript通过classList.toggle()方法切换主题类名（如theme-dark）以触发样式变化，或直接调用document.documentElement.style.setProperty()动态修改CSS变量值，从而实现全局表单样式的实时更新，同时配合localS
2025-08-17 22:48:01
743
如何避免在JavaScript中重复编写相似代码：以问答网页为例 本文旨在解决在JavaScript开发中重复编写相似代码的问题，以一个问答网页为例，展示如何通过使用三元运算符和函数来避免代码冗余，提高代码的可维护性和可读性。我们将重点讲解如何简化条件判断语句，以及如何将重复的代码块封装成可重用的函数，从而减少代码量，提升开发效率。
2025-08-17 22:46:15
562
使用 HTML 和 JavaScript 在 Enter 键按下时调用函数 本文介绍了如何使用HTML和JavaScript在文本框中按下Enter键时触发特定函数。文章提供了两种实现方法：一种是使用JavaScript的submit事件监听器，另一种是直接在HTML的标签中使用onsubmit属性。通过清晰的代码示例和解释，帮助开发者轻松实现该功能。
2025-08-17 22:42:01
346
HTML如何设置缓冲样式？buffering伪类的用法是什么？ 答案：HTML中无:buffering伪类，需通过JavaScript监听媒体事件并动态添加CSS类来实现缓冲样式。具体做法是结合video元素的waiting、playing等事件，控制加载覆盖层的显示与隐藏，配合CSS动画提供视觉反馈，并考虑可访问性与性能优化，适用于视频、图片懒加载、AJAX请求等多种场景。
2025-08-17 22:41:01
847
HTML段落标签怎么用？p标签的作用是什么？ 标签用于定义HTML文档中的段落，自动在前后添加空白以区分段落，通过CSS可自定义字体、颜色、间距等样式，如使用class类设置特殊样式；与标签不同，表示独立段落并自带间距，仅用于行内换行，适用于地址或诗歌等场景；HTML5强调语义化，虽未新增标签特性，但建议根据内容选择更合适的语义标签，并保持标签闭合以提升代码可读性。
2025-08-17 22:39:01
172
HTML表单如何实现断网检测？怎样在离线时保存表单数据？ 答案：通过navigator.onLine和online/offline事件检测网络状态，结合localStorage或IndexedDB离线存储表单数据，网络恢复后触发同步机制，利用fetch发送数据并实现幂等性处理，确保数据安全可靠提交。
2025-08-17 22:37:01
551
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部