Jquery DataTable 实现换行交替变色，实现根据单元格内容变换单元格背景颜色，实现 01 替换成是否

yaomengjia

已于 2023-12-16 17:00:19 修改

阅读量500

点赞数 6

文章标签： jquery 前端 javascript

于 2023-12-16 15:26:52 首次发布

本文链接：https://blog.csdn.net/u014393500/article/details/135033106

版权

Jquery DataTable常用知识点

1.实现换行交替变色

1.1.createdRow方法在每行数据生成时触发一次，
1.2.row表示整行数据，dataIndex表示索引，从0开始。
1.3.通过取模运算符%，结果为0的就是索引为偶数，就会变色
1.4. 第一行，第三行。。。索引为偶数，会变色

"createdRow": function( row, data, dataIndex){
			if(dataIndex % 2 === 0)
			$(row).css("background-color", "#E3ECEB");
		},

2.实现根据单元格内容变换单元格背景颜色-只变化文字所在区域

2.1.数据库中字段为color，字符型，根据数据库内容，变换颜色，这个只能变换文字所在span颜色，整个单元格还是原来的颜色
2.2 data表示当前单元格数据，type表示当前单元格数据类型，row表示整行数据，
第一种写法指定了data为color，即"data": “color”, 所以后面代码直接用data
第二种data为空，即"data": “”,所以后面代码要用row.color

 "columns": [
           {
              "data": "color",
              "defaultContent": "",
              "render": function(data,type,row){
                   if(data==='red')
                   {return '<span style="background-color:red ">'+data+'</span>';}
                   else{
                    return data;
                     }
                   },
               "sWidth": "80px" 
            },
			
			 {
              "data": "",
              "defaultContent": "",
              "render": function(data,type,row){
                   if(row.color==='red')
                   {return '<span style="background-color:red ">'+row.color+'</span>';}
                   else{
                    return row.color;
                     }
                   },
               "sWidth": "80px" 
            },
			{
              "data": "color",
              "defaultContent": "",
              "render": $.fn.dataTable.render.text(),
			  "createdCell": function (td, cellData, rowData, row, col) {
			  		if ( cellData === "sn333" ) {
			            $(td).css('background-color', 'yellow')
			         }
			      },
               "sWidth": "80px" 
            },

    ],

3.实现根据单元格内容变换单元格背景颜色-变化整个单元格

3.1 想要将整个单元格背景颜色发生变化，需要用到createdCell方法
3.2 td表示当前单元格节点，cellData表示当前单元格数据，rowData表示整行数据，row表示行索引，col表示列索引
和2相同，data指定了，直接用cellDate
date不指定，就要用row.color

 "columns": [
  
			{
              "data": "color",
              "defaultContent": "",
              "render": $.fn.dataTable.render.text(),
			  "createdCell": function (td, cellData, rowData, row, col) {
			  		if ( cellData === "sn333" ) {
			            $(td).css('background-color', 'yellow')
			         }
			      },
               "sWidth": "80px" 
            },

    ],

4.实现 01 替换成是否

4.1.当取值为数字时，可以根据数字变换成文字，数据库中字段为isopen，值为0和1，前台获取时，可以转化

 "columns": [
           {
            "data": "username",
            "defaultContent": "",
            "render": $.fn.dataTable.render.text(),
            "sWidth": "80px"
           },
            
           {
            "data": null,
            "defaultContent": "",
            "render": function (data, type, row) {
				if(row.isopen == 1){
					return "是";
				}else if(row.isopen == 0) {
					return "否";
				}
            },
            "sWidth": "100px"
           },

    ],