如何根據另一個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'); 
     } 
    }