如何在 DataTables 中固定首行置顶

本文档介绍了如何在 DataTables 表格中实现首行固定置顶的效果，即使在进行排序操作时，首行也能始终保持在表格顶部。通过修改 HTML结构，将需要固定的行放置在

使用 标签固定 DataTables 首行

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

标签。

步骤详解

1. HTML 结构调整:

   将需要固定在顶部的行从

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

   
       
   
           
   
               
   Process
               
   PC10519
               
   PC10520
               
   PC10523
               
   PC0524
           
       
       
   
           
   Average_SLA
           
   97.94 %
           
   98.29 %
           
   97.28 %
           
   99.08 %
       
       
   
           
   
               
   Process#1
               
   100.00 %
               
   100.00 %
               
   100.00 %
               
   100.00 %
           
           
   

2. CSS 样式 (可选):

   

   视野自助系统小型企业版2.0 Build 20050310

   自定义设置的程度更高可以满足大部分中小型企业的建站需求，同时修正了上一版中发现的BUG，优化了核心的代码占用的服务器资源更少，执行速度比上一版更快 主要的特色功能如下： 1）特色的菜单设置功能，菜单设置分为顶部菜单和底部菜单，每一项都可以进行更名、选择是否隐 藏，排序等。 2）增加企业基本信息设置功能，输入的企业信息可以在网页底部的醒目位置看到。 3）增加了在线编辑功能，输入产品信息，企业介绍等栏

   下载

   为了使固定的行更加醒目，可以添加自定义 CSS 样式。 在示例中，.average-css 类用于设置背景颜色、字体颜色和粗细。

   .average-css {
       font-weight: 600 !important;
       background-color: #333 !important;
       color: white !important;
   }

3. 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");
               }
           }
       });
   });

完整代码示例

    
    
    
    
    
    
    
    
    
    
    



    

        
SLA
        
Last update : 2022-06-03 10:08
    

    

        

            

                
Process
                
PC10519
                
PC10520
                
PC10523
                
PC0524
            
        
        

            

                
Average_SLA
                
97.94 %
                
98.29 %
                
97.28 %
                
99.08 %
            
        
        

            

                
Process#1
                
100.00 %
                
100.00 %
                
100.00 %
                
100.00 %
            
            

                
Process#2
                
98.34 %
                
No Sla
                
No Sla
                
100.00 %
            
            

                
Process#3
                
98.35 %
                
98.23 %
                
98.35 %
                
98.67 %
            
            

                
Process#4
                
100.00 %
                
100.00 %
                
100.00 %
                
100.00 %
            
            

                
Process#5
                
98.32 %
                
98.43 %
                
98.44 %
                
98.83 %
            
            

                
Process#6
                
98.34 %
                
99.76 %
                
97.99 %
                
98.41 %
            
            

                
Process#7
                
100.00 %
                
100.00 %
                
100.00 %
                
100.00 %
            
        
    

注意事项

• 确保 DataTables 库和相关依赖正确引入。
• 根据实际情况调整 CSS 样式和 DataTables 配置。
• 这种方法适用于简单的数据表格。 对于更复杂的需求，可能需要使用 DataTables 的其他高级功能或自定义插件。

总结

通过将需要固定的行放置在

标签内，可以轻松实现在 DataTables 表格中固定首行的效果。 这种方法简单有效，并且可以与其他 DataTables 功能兼容。希望本教程能帮助你解决在 DataTables 中固定首行的问题。