jQuery Datatable 필드 편집

Question

JQuery dataTable의 한 필드 값에 대해 부트 스트랩 레이블을 출력하고 싶습니다. 이 필드의 가능한 값은 '0'또는 '1'일 수 있으며 결과에 따라 dataTable에 출력 할 부트 스트랩 레이블을 결정할 수 있습니다. 불행히도 나는이 사건에 대한 진술을 어떻게 할 수 있는지 모른다.

내 JQuery와 :

나는 "활성화"필드의 결과이 같은 것을 사용할 필요가

$(document).ready(function() { 
    $('#accountOverview').dataTable({ 
     "ajax": { 
      "url": "/database/accounts.php", 
      "data": {"action": "selectAccounts"}, 
      "dataSrc": "" 
     }, 
     "columns": [ 
      { "data": "email" }, 
      { "data": "platform" }, 
      { "data": "coins" }, 
      { "data": "profitDay" }, 
      { "data": "playerName" }, 
      { "data": "tradepileCards" }, 
      { "data": "tradepileValue" }, 
      { "data": "enabled" } 
     ], 
     "autoWidth": false 
    }); 
}); 

:

if(enabled==1) <label class="label label-success">Online</label> 
else <label class="label label-error">Offline</label> 

HTML 테이블 :

<table id="accountOverview" class="table datatable"> 
    <thead> 
     <tr> 
      <th>E-Mail</th> 
      <th>Platform</th> 
      <th>Coins</th> 
      <th>Profit last 24h</th> 
      <th>Playername</th> 
      <th>Tradepile Cards</th> 
      <th>Tradepile Value</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tbody id="accountList"> 
     <!-- List all accounts --> 
    </tbody> 
</table> 

레이블은 "status"필드 = 마지막 각 행에 있어야합니다.

Answer 1

dataTable의 "draw"(AJAX가 데이터를로드 한 후 발생)에 따라 각 행의 마지막 td을 검색하고 wrapInner()을 사용하여 원하는 HTML을 삽입 할 수 있습니다. 따라서, 귀하의 경우, 시도 :

var apply_label=function(){ 
    $('#accountOverview').find('td:last-child').not(':has(.label)').each(function(){ 
     if(this.innerHTML==="1"){ 
      $(this).wrapInner('<span class="label label-success"></span>'); 
     } 
     else { 
      $(this).wrapInner('<span class="label label-danger"></span>'); 
     } 
    }); 
}; 
$('#accountOverview').dataTable({ 
    "ajax": { 
     "url": "/database/accounts.php", 
     "data": {"action": "selectAccounts"}, 
     "dataSrc": "" 
    }, 
    "columns": [ 
     { "data": "email" }, 
     { "data": "platform" }, 
     { "data": "coins" }, 
     { "data": "profitDay" }, 
     { "data": "playerName" }, 
     { "data": "tradepileCards" }, 
     { "data": "tradepileValue" }, 
     { "data": "enabled" } 
    ], 
    "autoWidth": false, 
    "drawCallback": function(settings) { 
     apply_label(); 
    } 
}); 

참고 :

1. 난 당신이 span (하지 label)하려는 생각합니다.
2. 나는 .label-danger (.label-error이 아님)을 원한다고 생각합니다.

Check it out at http://jsfiddle.net/jhfrench/wrkkbcf1/.