zoukankan      html  css  js  c++  java
  • 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"
    },
    ],
    
    
    
    
  • 相关阅读:
    JGUI源码:右键菜单实现(12)
    JGUI源码:开发中遇到的问题(11)
    JGUI源码:prefixfree 这个库有时候会引起网页一直加载中(10)
    Ext.net按钮事件中使用Response.Redirect的一个问题
    JGUI源码:Tab组件实现(9)
    IE7下使用兼容Icon-Font CSS类
    JGUI源码:JS菜单动态绑定(8)
    JGUI源码:组件及函数封装方法(7)
    JQuery对象关系图
    JGUI源码:Accordion折叠到侧边栏实现(6)
  • 原文地址:https://www.cnblogs.com/qinghuaL/p/9842590.html
Copyright © 2011-2022 走看看