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


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

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

    var t;
    t = $("#accountTbl").DataTable({
    searching: true,
    processing: true,
    dom: "<'row'<'col-sm-12'tr>> <'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"
    },
    ],
    
    
    
    
  • 相关阅读:
    委托事件学习笔记
    开发小技巧:C#逐个输出字符
    存储过程实例总结(开发中的错误与总结,调试,数据库函数DATEDIFF计算当前日期是否在本周内)
    一个简单的通用面板和菜单类
    PHP配置图文教程
    LaTeX——代码框风格设置
    layui获取弹出层内容
    argis android sdk配置备忘一下
    记录下-两点角度计算
    注册dll命令
  • 原文地址:https://www.cnblogs.com/qinghuaL/p/9842590.html
Copyright © 2020-2023  润新知