データテーブルに画像を表示する方法は？

Question

データテーブル内のセルにブール値の代わりにイメージを表示するにはどうすればいいですか？データテーブルは、データソースに関連付けられています。

Answer 1

カスタムformatter関数を使用すると、任意のHTMLをセルに配置できます。列の定義は次のようになります。

var myColumnSet = [ 
    { 
     key: 'active_employee', 
     label: 'Active', 
     formatter: function(el, oRecord, oColumn, oData) { 
      // el is the HTMLElement of the current cell 
      // oRecord gives you access to other fields from the 
      // DataSource, e.g.: oRecord.getData('full_name') 
      // oData is the value of the current field (active_employee) 

      if (oData) { 
       el.innerHTML = '<img src="/images/active.png">'; 
      } else { 
       el.innerHTML = '<img src="/images/not-active.png">'; 
      } 
     } 
    }, 
    // other Columns.... 
]; 

Custom Cell Formatting exampleも参照してください。