样式不显示问题 无论是放内联样式文件还是直接放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. python 之 列表生成式、生成器表达式、模块导入

    5.16 列表生成式 l=[]for i in range(100):    l.append('egg%s' %i)print(l)​l=['egg%s' %i for i in range(100 ...

  2. Python爬虫之设置selenium webdriver等待

    Python爬虫之设置selenium webdriver等待 ajax技术出现使异步加载方式呈现数据的网站越来越多,当浏览器在加载页面时,页面上的元素可能并不是同时被加载完成,这给定位元素的定位增加 ...

  3. day8文件操作作业详解

    1.day8题目 1,有如下文件,a1.txt,里面的内容为: 老男孩是最好的培训机构, 全心全意为学生服务, 只为学生未来,不为牟利. 我说的都是真的.哈哈 分别完成以下的功能: a,将原文件全部读 ...

  4. C# 数组之int[]

    一.数组分类 数组可以简单分为3类: 1维数组 2维数组 交错数组 二.数组初始化 1.一维数组 int [] A = { 1,2,3,4 } 直接赋值 或者 int [] A = new int [ ...

  5. 【NOI2014】起床困难综合症 贪心

    从高到低按位贪心,讨论一下初始0或1,分别暴力算出结果是什么 如果一开始0就能得1当然直接ans垒起来 如果1能得1而且当前m够用,那也垒起来,同时m减掉 否则gg 2min的代码 #include ...

  6. Spring boot中应用jpa jpa用法

    https://blog.csdn.net/u012582402/article/details/78717705

  7. 部署到CentOS Net Core

    Net Core部署到CentOS 本文基于初次或再次尝试部署.Net Core应用到Linux服务器上,我尝试后自我总结的经验一个简单的Demo,尝试部署在Linux服务器上和跨服务器访问数据库. ...

  8. 关系型数据库---MySQL---数据表

    1.在创建一个新的MySQL数据表时,可以为它设置一个类型: 2.MySQL支持多种数据表类型,有各自的特点和属性,最重要的3种类型: 1.1 MyISAM 1.2 InnoDB 1.1 可以把Inn ...

  9. selenum autoit上传图片

    目前,一般实现文件图片上传的方式都是有一个按钮,点击之后直接调用操作系统自身的弹框,选择文件后,实现上传.因为Selenium不支持调用操作系统的操作,所以这种情况下,利用Selenium无法完成图片 ...

  10. log4j.properties错误及配置详解

    当在Eclipse上运行MapReduce程序遇到以上问题时,请检查项目中是否有log4j.properties配置文件,或者配置文件是否正确. 刚接触Hadoop的时候不太了解log4j.prope ...