DataTable中根据某一个字段来改变本行格式
程序员文章站
2022-04-15 14:45:21
...
效果如图:
根据红色 字体这一列的数据,是到期日期,如果在一个月内到期的话,那么该行将会变成黄色显示,并且到期日期将会变成红色。
关于columns 和 columnDefs的区别,请看这篇
http://blog.csdn.net/beta_xiyan/article/details/76614992
代码如下:
"aoColumnDefs":[
{//第 14 列 到期日期(一开始写的13,因为数数一般会从0 开始...)
"targets":13,
createdCell: function(td, cellData, rowData) {
var data = cellData
if ((data+"").length>=8) {
var data1 = data.substr(0,4)+"/"+data.substr(4,2)+"/"+data.substr(6,2)
var da_1 = new Date(Date.parse(data1));
var da_2 = new Date();
if ((da_1-da_2)/1000/3600/24 < 30 && (da_1-da_2)/1000/3600/24 > 0) {//三天内到期
/*该行变色*/
$(td).parents('tr').css("background-color","yellow");
$(td).css("color","red");
}
return data
}else
return data
},
}
],
另外:
createdCell: function(nTd, sData, oData, iRow, iCol) 有五个参数,他们的意思分别是:
①,ntd 就是这个单元格对应table 中的《td》《/td》(此处使用英文尖括号会解析td)。
②,sData指 单元格中的数据,
③,oData指本行的数据,
至于 irow ,icol大概就是 行 和 列 了把,上述代码中没用到。
还有一个:
提到 createdCell 就不得不说一下 Render,也是在columnDefs中使用:
"aoColumnDefs":[
{//倒数第一列
"targets":-1,
"bSortable": false,
render: function(data, type, row) {
var html ='<button class="btn btn-xs jfedit btn-danger" value="'+row.tcId+'">编辑</button> <button class="btn btn-xs btn-danger jfdelete" value="'+row.tcId+'">删除</button>';
return html;
}
},
不过,后者只能对数据进行渲染,不能对格式进行操作,而前者既可以对数据操作,又能对格式进行操作。
下一篇: Mysql设置某一个字段为当前时间