样式不显示问题 无论是放内联样式文件还是直接放HTML文件都不显示

后来发现是因为datatable是放在后面初始化,它自带的样式覆盖了我们自定义的样式

所以要注意写code时,很多时候不是code不起作用,而是后面的code覆盖了前面的code

由于一直想改变table的背景颜色,但是第一列的颜色总是被覆盖,找了很久也没找到是哪里覆盖了

我的code是创建全部数据后会收集‘分类’那一列的数据进下拉框中让使用者进行选择

        "initComplete": function () {
console.log( '表格初始化完成 initComplete' ); // DEBUG
this.api().columns(4).every( function () {
var classify_col = this; // 每一行的第4列元素
var select = $('<select><option value=""></option></select>')
.appendTo( $(classify_col.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
classify_col
// 搜索条件
.search( val ? '^'+val+'$' : '', true, false )
// 开始加载
.draw();
} );
// 遍历第三列每一个元素 不重复排序添加到option中
classify_col.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
},
// 每一行创建完调用的函数
"createdRow": function (row, data, dataIndex) {
// console.log( '一行 createdRow:'+dataIndex ); // DEBUG
// row : tr dom
// data: row data
// dataIndex:row data's index
$(row).addClass(data.类名); if(data.类名=="official"){
$(row).css("background-color","rgb(250, 236, 236)");
}
else if(data.类名=="music_stage"){
$(row).css("background-color","rgb(217, 251, 255)");
}
else if(data.类名=="Radio"){
$(row).css("background-color","rgb(255, 250, 200)");
}
else if(data.类名=="group_arts"){
$(row).css("background-color","rgb(201, 245, 255)");
}
else if(data.类名=="tv_station"){
$(row).css("background-color","aliceblue");
}
else if(data.类名=="news"){
$(row).css("background-color","#cdcfff");
}
else if(data.类名=="pub_performance"){
$(row).css("background-color","#FFCC99");
}
else if(data.类名=="pub_performance"){
$(row).css("background-color","#FFCC99");
}
else if(data.类名=="magazine"||data.类名=="cf"){
$(row).css("background-color","#ffff9c");
}
else if(data.类名=="VLOG"){
$(row).css("background-color","#d4fab4");
}
else if(data.类名=="concert"||data.类名=="FM"){
$(row).css("background-color","#bbedff");
}
else if(data.类名=="live"){
$(row).css("background-color","#ffe3c4");
}
else if(data.类名=="teleplay"){
$(row).css("background-color","#ffcefa");
}
else if(data.类名=="other"){
$(row).css("background-color","#ebd7f4");
}
}

即先每一行执行 “createdRow” 全部行执行完之后执行 “initComplete”

在createdRow中我根据数据的不同对每一行的背景颜色进行了设置,但是最后排列出来第一列还是datatable默认的背景颜色,如果在第4列的下拉框中选择了分类排序呈现之后第三列的数据也是datatable默认的背景颜色。

所以我怀疑是每次datatable执行了api之后都会重新带去它默认的样式

于是我去控制台“Elements”->"Styles"中找到默认的样式

(应该是没有删除线的,这是我修改后起作用的图片,我懒得再截了)

之后在css文件中将奇偶行的背景颜色都设为透明:

table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
background-color:transparent;
}
table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
background-color: transparent;
}

这样datatable默认的样式就不再起作用了,需求实现

datatable css not work的更多相关文章

  1. jqurey datatable tableTools 自定义button元素 以及按钮自事件

    版本 1.10.4 "dom": 'T<"clear">lfrtip', "tableTools": { //"sSw ...

  2. datatable插件使用小记

    经验,是前行路上,磕磕碰碰,不断探索,最终留下的结晶:亦是下一次,快速高效,寻求到结果的快捷方式. datatable插件具体可参考: 官网:http://datatables.club/ 参数说明: ...

  3. jqurey datatable tableTools 自定义button元素 以及按钮定义事件

    版本 1.10.4 "dom": 'T<"clear">lfrtip', "tableTools": { //"sSw ...

  4. 使用jQuery开发datatable分页表格插件

    当系统数据量很大时,前端的分页.异步获取方式就成了较好的解决方案.一直以来,我都希望使用自己开发的 jquery 插件做系统. 现在,学习了 jquery 插件开发之后,渐渐地也自己去尝试着开发一些简 ...

  5. 关于DataTables一些小结

    最近项目中使用了DataTables,故小结了一下. 导入CSS文件<link rel="stylesheet" href="<%=base %>/js ...

  6. jQuery 表单验证插件——Validation(基础)

    这个插件不错,是用jquery写的.能进行表单验证.我喜欢它的原因是因为 1.他有自带的验证规则 2.你可以自己写验证规则 3.可以通过ajax与后台交互,与后台数据比较.最后返回结果!我在表单中要验 ...

  7. jsp引入struts标签,引入自己写的jquery需要注意的问题

    1.使用struts2标签的时候在jsp页面开头引入这句话: <%@ taglib prefix="s" uri="/struts-tags"%> ...

  8. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float,实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写,小写转大写,数字保留,其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

随机推荐

  1. django 模版 语法与使用

    目录 django 模版语法与使用 django模板语言介绍 (摘自官方文档) 链接 什么是模板? 模板语句的 注释 变量 {{ 变量 }} 点(.)在模板语言中有特殊的含义,用来获取对象的相应属性值 ...

  2. from appium import webdriver 报错

    from appium import webdriver 报错 看看你的文件是不是就叫appium

  3. System.Span, System.Memory,还有System.IO.Pipelines

    System.Span, System.Memory,还有System.IO.Pipelines 使用高性能Pipelines构建.NET通讯程序 .NET Standard支持一组新的API,Sys ...

  4. net Core 2.0应用程序发布到IIS

    .net Core 2.0应用程序发布到IIS上注意事项   .net Core2.0应用程序发布window服务器报错容易错过的配置. 1.应用程序发布. 2.IIS上新建网站. 3.应用程序池选择 ...

  5. 牛客网Java刷题知识点之面向对象java的四大特性(抽象、封装、继承、多态)

    不多说,直接上干货! 面向对象java的四大特性之抽象 抽象就是有点模糊的意思,还没确定好的意思. 就比如,要定义一个方法和类.但还没确定怎么去实现它的具体一点的子方法,那我就可以用抽象类或接口.具体 ...

  6. go实现主线程等待子线程都运行完再退出

    方式一 package main import ( "fmt" ) func main() { ch := make(chan struct{}) count := 2 // co ...

  7. 十六进制和ASCII之间的转换

    2.关于两个byte[]数组的合并: public static byte[] byteMerger(byte[] byte_1, byte[] byte_2) { byte[] byte_3 = n ...

  8. mui对话框、表单

    1.mui.alert() 普通提醒参数 1.message Type: String 提示对话框上显示的内容 2.title Type: String 提示对话框上显示的标题 3.btnValue ...

  9. python中的random

    random.randint(a,b)    用于生成一个指定范围内的整数,a为下限,b为上限,生成的随机整数a<=n<=b;若a=b,则n=a:若a>b,报错 import ran ...

  10. C++拾遗(五)——类

    类是 C++ 中最重要的特征.C++ 语言的早期版本被命名为“带类的 C(Cwith Classes)”,以强调类机制的中心作用.随着语言的演变,创建类的配套支持也在不断增加.语言设计的主要目标也变成 ...