レンダリングデータ型ブール型列

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つはこの問題に関連し、もう1つは構文を更新するだけです。重要な2変更点は以下のとおりです。1ではないので

がちょうど data == trueに冗長 columnDefs
• 変更data === trueでそれを持つのではなく、あなたがこの振る舞いを持ちたい各列にrender機能を移動し
• ===本当それは

（===考慮にタイプを取る厳密な比較のためである）== 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>';} 
     } 
    }); 
    }); 
}; 

あなたがしなければならないすべてがされています

で正確な

• thのtableheadブール値を含む列には特定のクラスを取得する必要があります。
  • テーブルID
  • クラスの名前の関数をとしてブール