dataTable-表格调色

最新推荐文章于 2023-01-11 14:36:39 发布
最新推荐文章于 2023-01-11 14:36:39 发布
阅读量596 收藏
点赞数
分类专栏： web前端 文章标签： javascript c/c++ ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan487639/article/details/84812969
版权
国际惯例贴下效果图，大红真心丑，无耐看的人是三四十岁的大叔，理解下吧。


[img]http://dl2.iteye.com/upload/attachment/0119/2840/fbe0d5e9-fd5d-313e-a0f6-dbc9857cb0fb.png[/img]

设置颜色的代码如下，其实是一个回调函数 


						"fnRowCallback" : function(nRow, aData) {
							if (aData[2] == "报警") {
								$('td', nRow).css({
									"background-color" : "#e10000",
									"color" : "#fff"
								});
							} else {
								$('td', nRow).css({
									"background-color" : "#F9F9F9",
								});
							}
						},



最后贴上完整的js代码 


/**
 * 
 */

$(document).ready(function() {

	drawTable();

});
function drawTable() {
	$('#example')
			.DataTable(
					{
						"language" : {
							"zeroRecords" : "无数据",
							"info" : "当前_PAGE_页，第_START_到_END_条，共 _TOTAL_条记录",
							"paginate" : {
								"next" : "下一页",
								"previous" : "上一页"
							}
						},

						"pageLength" : 15,
						"dom" : 'tip',
						"data" : [
								[
										"1",
										"国政通身份认证",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"2",
										"<span style='color:#fff'>鹏元身份认证</span>",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"3",
										"同盾风险决策",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"4",
										"鹏元四要素",
										"关闭",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"5",
										"块钱",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"6",
										"国政通身份认证",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"7",
										"<span style='color:#fff'>鹏元身份认证</span>",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"8",
										"同盾风险决策",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"9",
										"鹏元四要素",
										"关闭",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"10",
										"块钱",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"<span>11</span>",
										"国政通身份认证",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"12",
										"<span style='color:#fff'>鹏元身份认证</span>",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"13",
										"同盾风险决策",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"14",
										"鹏元四要素",
										"关闭",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"15",
										"块钱",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"<span>16</span>",
										"国政通身份认证",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"17",
										"<span style='color:#fff'>鹏元身份认证</span>",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"18",
										"同盾风险决策",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"19",
										"鹏元四要素",
										"关闭",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"20",
										"块钱",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"<span>21</span>",
										"国政通身份认证",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"22",
										"<span style='color:#fff'>鹏元身份认证</span>",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"23",
										"同盾风险决策",
										"正常",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"24",
										"鹏元四要素",
										"关闭",
										"<a class='normal' onclick='showRequest()'>查看详情</a>",
										"<a class='normal' onclick='showResponse()'>查看详情</a>",
										"<a class='normal' onclick='showAnalysis()'>查看详情</a>" ],
								[
										"25",
										"块钱",
										"报警",
										"<a class='alarm' onclick='showRequest()'>查看详情</a>",
										"<a class='alarm' onclick='showResponse()'>查看详情</a>",
										"<a class='alarm' onclick='showAnalysis()'>查看详情</a>" ],

						],

						"fnRowCallback" : function(nRow, aData) {
							if (aData[2] == "报警") {
								$('td', nRow).css({
									"background-color" : "#e10000",
									"color" : "#fff"
								});
							} else {
								$('td', nRow).css({
									"background-color" : "#F9F9F9",
								});
							}
						},

					})
}
function showRequest() {
	$("#requestModal").modal("show");
}
function showResponse() {
	$("#responseModal").modal("show");
}
function showAnalysis() {
	window.location.href = "./identity.jsp"
}
yuan487639
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
设置DataTable颜色
安徽锐锋科技-沐雨潇竹
07-20 615
设置整表颜色 Target.delete({0,1}..{*,*}) Target.backgroundcolor:=makerGBValue(255,255,255) //INIT background Color For Blank 设置单列颜色 TargetTable.setbackgroundcolorcells({0,i}..{*,i},makerGBValue(160, 255, 192)) //Change background Color For ok 设置指定范围颜色 TargetT
C#读取execl到datatable，设置execl单元格颜色
weixin_33795743的博客
09-24 277
public class OperateExecl { //读取execl到datatable public static DataTable ReadFile(string path) { string strConn=""; if (Path.GetExtension(path).ToLo...
datatables设置行颜色
￠虾咪┆℡ 的博客
03-19 652
function DataExportDataTable() { //datatables的数据请求 $('#Data_export').DataTable( { "bAutoWidth":false, "processing": true, "bProcessing": true, "sDom": 'T<"clear">lfrtip', "tableTools": { "sSwf...
dataTable 行操作单元格上色
yjw_2019的博客
01-11 459
dataTable 行操作
wpf datagrid 单元格颜色 根据datatable动态显示datagrid内容
07-22
wpf datagrid 单元格颜色 根据条件改变颜色换 根据表datatable动态显示datagrid内容
datatable-main.zip
12-19
"datatable-main.zip" 是一个包含有关 Datatable 主要功能和使用的资源压缩包。Datatable 是一个广泛用于Web开发的数据展示库，尤其在JavaScript环境中，它提供了丰富的功能来处理和展示表格数据。这个压缩包可能...
ngx-datatable-master.zip
11-29
ngx-datatable-master.zip 文件很可能是这个库的源代码压缩包，包含了项目的所有源码、示例、文档等内容。在这个库中，你可以深入理解如何在 Angular 应用中高效地处理和展示大量数据。 首先，`ngx` 前缀是 Angular...
datatable_基本初始化.rar
07-23
这个“datatable-基本初始化.rar”压缩包提供的资料着重于介绍如何初始化 DataTables 和如何根据需求对其进行自定义设置。 首先，让我们深入理解 DataTables 的基本概念。DataTables 是一个强大的开源库，它可以对 ...
azure-datatable-tools
03-13
标题“azure-datatable-tools”指的是一个与Azure相关的数据表工具集，这通常涉及到对云存储中的数据进行管理和操作的库或框架。这个工具可能包含了帮助开发者在Azure环境中处理数据表服务的功能，比如创建、查询、...
datatable-sample
05-24
通过学习和分析"datatable-sample"，开发者不仅可以掌握基础的HTML表格语法，还能了解如何结合其他技术来实现一个功能完善的、用户体验良好的数据展示方案。这对于Web开发人员来说，是一项非常实用的技能。
[简单]DataTables简单示例
08-07
NULL 博文链接：https://53873039oycg.iteye.com/blog/2101989
datatables修改显示样式(修改行、列背景色，字体，隔行换色)
denglinglin2653的博客
10-24 1712
这里主要介绍两个函数：aoColumnDefs和createdRow datatables的使用方式非常简单，自行查阅资料，直接上代码： var t;t = $("#accountTbl").DataTable({ searching: true, processing: true, dom: "<'row'<'col-sm-12'tr>>\...
html datatable修改行,DataTable根据条件修改行颜色和特定格颜色
weixin_29904489的博客
06-04 1632
DataTable根据条件修改行颜色和特定格颜色DataTable根据条件修改行颜色和特定格颜色JS代码如下：$.get("/terminal_get_all_app/",function (cur_data) {// {#alert("Data Loaded: " + cur_data);#}table = $('#terminal_datatables').DataTable({respons...
datatable根据条件设置表格行中字的颜色或背景
weixin_30273931的博客
03-28 577
使用row回调函数 "rowCallback": function (row, data) { if (xxx) { //给行添加背景色 $(row).css("background", "red"); //给行内的字添加颜色 $...
dataTable 服务端分页请求
xqtAmateur
12-05 626
使用datatables之前一直是 数据源形式，一次性请求完数据 然后进行渲染，但是由于本次项目 数据较多首次加载体验效果不好，故领导让改成服务端模式请求。
DataTable 合并、分页
03-29 453
合并、拼接、连接两个DataTable
angular5 ngx-datatable 使用自定义的css
weixin_30950607的博客
06-27 684
使用ngx-datatable，自定义css 需要： 在css文件中加入 @import '~@swimlane/ngx-datatable/release/index.css'; @import '~@swimlane/ngx-datatable/release/themes/material.css'; @import '~@swimlane/ngx-datatable/release...
Ionic2集成ngx-datatable,ng2-tree第三方控件.md
weixin_30340353的博客
05-17 341
1. 基本环境配置 1.1. 命令安装相应的依赖 1.2. 在Module定义中引入对应Module 1.3. 引入对应的CSS 2. 简单使用示例验证是否集成成功 2.1. ngx-datatable的使用 2.2. ng2-tree的使用 因为Ionic2中没有DataTable控件，也没有Tree控件，我们这边又要求使用Ionic来开发WebPC端的应用，所以就采用集成第三方的方...
angular5 ngx-datatable无法拉伸表格
qq_33788609的博客
02-22 663
遇到的问题 项目开发周期长，当时用的框架是angular5，目前angular的版本已经更新到angular7，公司要实现表格无线滚动并且可以支持每一列可以自由拉伸，ngx-datatable的拉伸在angular5上不起作用 替换的方案 使用jQuery+jquery.resizableColumns+angular2-infinite-scroll替换ngx-datatable 对于外部插...
params.append(3); //行数 params.append(4); //列数 //表格对象 QAxObject* datatable = tables->querySubObject("Add(QAxObject*, int, int, QVariant&, QVariant&)", params); datatable->setProperty("Style", "网格型"); //设置表头 QAxObject* rangeTitle = datatable->querySubObject("Cell(int, int)", 1, 1)->querySubObject("Range"); rangeTitle->querySubObject("ParagraphFormat")->setProperty("Alignment", "wdAlignParagraphCenter"); rangeTitle->querySubObject("Font")->setProperty("Size", 10.5); rangeTitle->dynamicCall("SetText(QString)", QStringLiteral("序号")); rangeTitle = datatable->querySubObject("Cell(int, int)", 1, 2)->querySubObject("Range"); rangeTitle->querySubObject("ParagraphFormat")->setProperty("Alignment", "wdAlignParagraphCenter"); rangeTitle->querySubObject("Font")->setProperty("Size", 10.5); rangeTitle->dynamicCall("SetText(QString)", QStringLiteral("测量值")); rangeTitle = datatable->querySubObject("Cell(int, int)", 1, 3)->querySubObject("Range"); rangeTitle->querySubObject("ParagraphFormat")->setProperty("Alignment", "wdAlignParagraphCenter"); rangeTitle->querySubObject("Font")->setProperty("Size", 10.5); rangeTitle->dynamicCall("SetText(QString)", QStringLiteral("理论值"));帮我改成六列五行，表头分别是：序号、孔深（m）、倾角、方位角、上下偏差、左右偏差
最新发布
07-22
QAxObject* rangeTitle = datatable->querySubObject("Cell(int, int)", 1, 1)->querySubObject("Range"); rangeTitle->querySubObject("ParagraphFormat")->setProperty("Alignment", "wdAlignParagraphCenter"); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值