datatables修改显示样式(修改行、列背景色，字体，隔行换色)

最新推荐文章于 2024-05-14 13:42:58 发布

denglinglin2653

最新推荐文章于 2024-05-14 13:42:58 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：http://www.cnblogs.com/qinghuaL/p/9842590.html

本文介绍了如何使用datatables的aoColumnDefs和createdRow函数来修改列和行的显示样式。aoColumnDefs用于调整列的显示，如设置特定列的class，而createdRow则用于定制行的样式，实现如隔行换色的效果。实现这些功能需要配合前端CSS定义相应的样式类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里主要介绍两个函数：aoColumnDefs和createdRow

datatables的使用方式非常简单，自行查阅资料，直接上代码：

var t;
t = $("#accountTbl").DataTable({
    searching: true,
    processing: true,
    dom: "<'row'<'col-sm-12'tr>>\n\t\t\t<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",
    language: {
        "info": "显示从 _START_ 到 _END_ 总计 _TOTAL_ 条记录",
        "infoEmpty": "显示从 0 到 0 of 0 条记录",
        "lengthMenu": "每页显示 _MENU_ 条记录",
        "emptyTable": "查询无记录",
        "loadingRecords": "加载中...",
        "zeroRecords": "查询无记录",
    },
 //  aoColumnDefs:[
 // {"sClass":"col_class","aTargets":[0]},{"sClass":"cos_class","aTargets":[1]}],
    createdRow: function ( row, data, index ) {
            if ( index %2 == 0 ) {
                $('td', row).css('font-weight',"bold").css("color","#c43ff6");
            }
        },
    buttons: ["print", "copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"],
    select: true,
    rowId: 'id',
    serverSide: true,
    ajax: {
        "url": '',
    },
    columns: [{
        data: "id",
        "orderable": true,"width":"50px"
    }, 
    ],
})

1、aoColumnDefs：

　　这个函数是修改列显示的，{"sClass":"col_class","aTargets":[0]}，"aTargets"这个参数代表，从左到右第一列，第二列就是[1]，这个col_class需要自己在前端定义。

　 <style>
.col_class{
         color: #ff7e29;
      }
      .cos_class{
         color: #2a1cf6;
      }
   </style>
2、createdRow：
　　这个函数是修改行显示的，createdRow: function ( row, data, index ) {}，三个参数row代表行，data表示你传入的字段，意思就是说你可以根据字段的内容进行过滤显示，
index是行的索引值。
隔行换色显示：

if ( index %2 == 0 ) {
      $('td', row).css('font-weight',"bold").css("color","#c43ff6");
 }
根据id显示：

if ( data['id] %2 == 0 ) {
      $('td', row).css('font-weight',"bold").css("color","#c43ff6");
 }

ps:如果想要修改td标签的长度，可以在columns中进行限制的。

 columns: [{
        data: "id",
        "orderable": true,"width":"50px"
    }, 
    ],

转载于:https://www.cnblogs.com/qinghuaL/p/9842590.html