渲染數據表布爾列

Question

我有數據表使用服務器端處理返回數據。我沒有修改從數據表給出的基本示例。

我有一些布爾列，我想呈現爲圖標例如1 =綠色勾號0 =紅色十字或類似的東西。它目前看起來像this。 我將如何去渲染只有3列？

這裏的代碼，我已經嘗試過，但是這會導致整個表是空白......

$(document).ready(function() { 
    $('#log').dataTable({ 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "assetlog.php" 
    "columns": [ 
      { "data": "id" }, 
      { "data": "assetcode" }, 
      { "data": "name"}, 
      { "data": "shift" } 
      { "data": "datetime" }, 
      { "data": "stop_production" }, 
      { "data": "furtheractions" } 
      { "data": "jobcomplete" }, 
      { "data": "duration" }, 
      ], 
      "columnDefs": [ 
         { 
          "render": function (data, type, row) { 
           return (data === true) ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>'; 
          }, 
          "targets": 6 
         } 
        ] 

    }); 
}); 

感謝

Answer 1

columns和columnDefs是多餘的;也就是說，你現在添加到columnDefs shouls只是去你的columns爲你想要打勾的標記。它應該是這樣的：

/*Note that I'm assuming you're using DT 1.10.x, so the 'b' in front of boolean options 
*is unnecessary, if you aren't using 1.10.x then go ahead and put those back in.*/ 
$(document).ready(function() { 
    $('#log').dataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajaxSource": "assetlog.php" 
     "columns": [ 
      { "data": "id" }, 
      { "data": "assetcode" }, 
      { "data": "name"}, 
      { "data": "shift" }, 
      { "data": "datetime" }, 
      /*Note that data == true instead of ===, if you have 1 or 0 it isn't === 
      (strictly equal) to true but it is == (evaluates to equal) to true*/ 
      { "data": "stop_production", 
      "render": function (data, type, row) { 
          return (data === true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "furtheractions", 
      "render": function (data, type, row) { 
          return (data == true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "jobcomplete", 
      "render": function (data, type, row) { 
          return (data == true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "duration" } 
     ] 
    }); 
}); 

我做了3只修改了代碼，2有關這個問題，一個剛剛更新的語法。最重要的2度的變化是：

• 移動render功能到您希望有這種行爲的每一列，而不是隻讓它在冗餘columnDefs
• 變化data === true到data == true的，因爲1不是===真實的，但它是== TRUE（===是比較嚴格採取型進去）

而且少了一個相關的變化是：

• bProcessing和bServerSide應該是processing和serverSide。前者是DataTables選項的傳統格式，它使用匈牙利符號，並且由於您沒有匈牙利符號columns，您必須使用不需要棄用符號的v1.10.x。

注：您也提到，你會得到一個空白頁，一旦你添加了columns選項，但似乎缺少data: shift後逗號這可以解釋。

Answer 2

它可能有點晚，但我實際上有同樣的問題。下面是一個簡短的代碼替換值「1」和「0」的綠色引導打勾或紅色引導交叉：

function remplacerBool(tableauID, boolClass) { 
    $(tableauID + ' tr').each(function (i, row) { 
    $('td', this).each(function (j, cell) { 
     if ($(tableauID + ' th').eq(j).hasClass(boolClass)) { 
     if (cell.innerHTML == '1') {cell.innerHTML = '<div class="text-center text-success"><span class="glyphicon glyphicon-ok-circle"></span></div>';} 
     if (cell.innerHTML == '0') {cell.innerHTML = '<div class="text-center text-danger"><span class="glyphicon glyphicon-remove-circle"></span></div>';} 
     } 
    }); 
    }); 
}; 

所有你需要做的是：

• 精確的thtablehead如果列中包含布爾值，那麼應該得到一個特定的類。比如，我用<th class='bool'>
• 調用這兩個參數的函數：
  • 表ID
  • 類的功能應該認識名字作爲布爾