如何根据另一个TD元素更改JQuery Datatables TD元素中的图标？

Question

我想用JQuery Datatable库创建一个Datatable，但为了美化和UI的原因，我希望图标根据另一个输入字段进行更改。比方说，

If td.field 4 is null then td.field 5 icon=1 else icon=2. 

Answer 1

你不会增加你要添加一个CSS类的图标，然后在CSS类，你要添加你想要的图像。

假设你已经让你ajax调用，并且你有JSON并且你正在创建数据表。

table = $('#table').DataTable({ 
    "columns": [ 

      { "className":'userName col-md-2', "data": "userName" }, 
      { "className":'desc col-md-2', "data": "desc" }, 
      { "className":'timeStart col-md-2', "data": "timeStart" }, 
      { "className":'timeEnd col-md-2', "data": "timeEnd" }, 
      { "className":'dispatcher col-md-2', "data": "dispatcher" }, 

      { 
       "className":  'edit', 
       "orderable":  false, 
       "data":   null, 
       "defaultContent": '' 
      }, 

     ], 
     "order": [[2, 'desc']], !NOT FINISHED YET 

立即在此之后并的之前table.row.add你必须seperately创建你要操作的图标createdRow。 在表格部分内添加您要为createdRow创建的语句。

"createdRow": function (row, data, index) { 
     if (data.dispatcher == null) { 
      $('td', row).eq(5).addClass("edit-incident2"); 
      }else{ 
      $('td', row).eq(5).addClass("edit-incident"); 
      } 
     } 

在这之后你的代码看起来像下面的女巫是完全表代码。

table = $('#table ').DataTable({ 
    "columns": [ 

      { "className":'userName col-md-2', "data": "userName" }, 
      { "className":'desc col-md-2', "data": "desc" }, 
      { "className":'timeStart col-md-2', "data": "timeStart" }, 
      { "className":'timeEnd col-md-2', "data": "timeEnd" }, 
      { "className":'dispatcher col-md-2', "data": "dispatcher" }, 

      { 
       "className":  'edit', 
       "orderable":  false, 
       "data":   null, 
       "defaultContent": '' 
      }, 

     ], 
     "order": [[2, 'desc']], 
     "createdRow": function (row, data, index) { 
     if (data.dispatcher == null) { 
      //console.log(data.dispatcher); 
      $('td', row).eq(5).addClass("edit-incident2"); 
      }else{ 
      $('td', row).eq(5).addClass("edit-incident"); 
      } 
     }  
    }); 

然后你画你的表和语句使这项工作。

table.row.add({ 
      "userName":  responsejson.userName, 
      "desc":   responsejson.desc, 
      "timeStart": responsejson.timeStart, 
      "timeEnd":  responsejson.timeEnd, 
      "dispatcher": responsejson.dispatcher, 
      "_id":   responsejson._id, 
     }).draw(); 

两个CSS类应该是这样的

td.edit-incident { 
    background: url('../img/incident_management.png') no-repeat center center; 
    cursor: pointer;} 

td.edit-incident2 { 
    background: url('../img/incident_management2.png') no-repeat center center; 
    cursor: pointer;} 

这是不是令人难以置信的美妙，但我花了几个小时，我想结果是用户不错的，很容易立即明白他在看什么。

Answer 2

"columns": [ 
{ 
"className": 'details-control', "orderable": false, "data": null,"defaultContent": '', "render": function (data, type, row) { 
    if(data.id==1) 
      return '<span class="glyphicon glyphicon-remove"></span>'; 
    else 
    return '<span class="glyphicon glyphicon-ok"></span>'; 
    }, 
} 
] 

只需修改列值render.it也可以直接添加图标拖入数据表与

Answer 3

giv ids for each row and tds 

    <tr id="1"> 
       <td id="1"></td> 
       <td id="2"></td> 
       <td id="3"></td> 
    </tr> 

if you creating <td> dynamically using the database 

    for(i=0;i<upto number of tds in a row;i++) 
    { 
     if($('#'+i).text()!='')//find td is null or not 
     {    
      $('#'+i).append('if'); 
     } 
     else 
     {  
      $('#'+i).append('else'); 
     } 
    }