本文介绍了如何使用 Datatables 库实现固定表格首行置顶的功能，即使在对表格进行排序时，首行也能始终保持在顶部。通过将需要固定的行添加到
标签中，并配合 css样式，可以轻松实现这一需求。本文提供了详细的代码示例和步骤说明，帮助开发者快速掌握该技巧。在 DataTables 中，有时我们需要将表格的某一行（例如，汇总行或平均值行）固定在顶部，使其始终可见，不受排序操作的影响。 这种效果可以通过将该行移动到
标签中来实现。 标签通常用于放置表格的页脚，但在这里，我们利用它来实现固定首行的目的。实现步骤：
-
修改 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” 这个样式是必须的，否则
的样式可能无法正确显示。初始化 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>
注意事项：
- 确保引入了 DataTables 的 CSS 和 JavaScript 文件，以及 jQuery 库。
- 根据实际情况调整 CSS 样式，以满足项目的需求。
- 如果表格数据是动态加载的，需要在数据加载完成后重新初始化 DataTables。
总结：
通过将需要固定的行添加到
标签中，可以轻松实现在 DataTables 中固定首行置顶的功能。 这种方法简单有效，并且可以灵活地应用于各种表格场景。希望本文能帮助你解决在 DataTables 中固定首行的问题。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
