本文档介绍了如何在 DataTables 表格中实现首行固定置顶的效果，即使在进行排序操作时，首行也能始终保持在表格顶部。通过修改 html结构，将需要固定的行放置在
标签内，可以轻松实现这一功能，同时保持表格的排序和其他 DataTables 功能的正常运作。使用
标签固定 DataTables 首行
DataTables 是一个功能强大的 jquery 插件，用于增强 HTML 表格的功能，例如排序、分页、搜索等。 有时候，我们需要将表格的首行固定在顶部，以便用户始终能够看到关键信息，例如平均值、总计等。 一种简单有效的方法是使用
标签。
步骤详解
-
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>
-
CSS 样式 (可选):
为了使固定的行更加醒目，可以添加自定义 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>
注意事项
- 确保 DataTables 库和相关依赖正确引入。
- 根据实际情况调整 CSS 样式和 DataTables 配置。
- 这种方法适用于简单的数据表格。 对于更复杂的需求，可能需要使用 DataTables 的其他高级功能或自定义插件。
总结
通过将需要固定的行放置在
标签内，可以轻松实现在 DataTables 表格中固定首行的效果。 这种方法简单有效，并且可以与其他 DataTables 功能兼容。希望本教程能帮助你解决在 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>
CSS 样式 (可选):
为了使固定的行更加醒目，可以添加自定义 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>
注意事项
- 确保 DataTables 库和相关依赖正确引入。
- 根据实际情况调整 CSS 样式和 DataTables 配置。
- 这种方法适用于简单的数据表格。 对于更复杂的需求，可能需要使用 DataTables 的其他高级功能或自定义插件。
总结
通过将需要固定的行放置在
标签内，可以轻松实现在 DataTables 表格中固定首行的效果。 这种方法简单有效，并且可以与其他 DataTables 功能兼容。希望本教程能帮助你解决在 DataTables 中固定首行的问题。© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
