dataTable-表格调色

阅读更多
国际惯例贴下效果图,大红真心丑,无耐看的人是三四十岁的大叔,理解下吧。


dataTable-表格调色_第1张图片

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

						"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",
										"国政通身份认证",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"2",
										"鹏元身份认证",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"3",
										"同盾风险决策",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"4",
										"鹏元四要素",
										"关闭",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"5",
										"块钱",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"6",
										"国政通身份认证",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"7",
										"鹏元身份认证",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"8",
										"同盾风险决策",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"9",
										"鹏元四要素",
										"关闭",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"10",
										"块钱",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"11",
										"国政通身份认证",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"12",
										"鹏元身份认证",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"13",
										"同盾风险决策",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"14",
										"鹏元四要素",
										"关闭",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"15",
										"块钱",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"16",
										"国政通身份认证",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"17",
										"鹏元身份认证",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"18",
										"同盾风险决策",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"19",
										"鹏元四要素",
										"关闭",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"20",
										"块钱",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"21",
										"国政通身份认证",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"22",
										"鹏元身份认证",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"23",
										"同盾风险决策",
										"正常",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"24",
										"鹏元四要素",
										"关闭",
										"查看详情",
										"查看详情",
										"查看详情" ],
								[
										"25",
										"块钱",
										"报警",
										"查看详情",
										"查看详情",
										"查看详情" ],

						],

						"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"
}
  • dataTable-表格调色_第2张图片
  • 大小: 45.2 KB
  • 查看图片附件

你可能感兴趣的:(dataTable-表格调色)