带有html内容的数据表

时间:2015-06-01 06:14:02

标签: jquery html checkbox datatable

我正在使用jquery datatablejson格式的数据输入。

$('#newItemBasketTab').dataTable({
  "aaData": result.itembasketdata,
  "aoColumns": 
  [
     {"mDataProp": "nic5dcodename"},
     {"mDataProp": "asiccprodcodename"},
     {"mDataProp": "unit_name"},
     {"mDataProp": "prod_quantity"},
     {"mDataProp": "prod_value"}
  ]
});

现在,我想在datatable的第一列中放置一个复选框,并根据json数据中的ID字段,checkbox需要checked或{{ 1}}。是否可以将html内容添加到unchecked

2 个答案:

答案 0 :(得分:1)

你的代码看起来像,

$('#newItemBasketTab').dataTable({
  "aaData": result.itembasketdata,
  "aoColumns": 
  [
     {"mDataProp": "Selection", 
      "fnRender":function(obj, type){
                   if(obj.aData['ID'])
                        return "<input type='checkbox' checked='checked'>"
                   else
                        return "<input type='checkbox'>"
                 }
     }
     {"mDataProp": "nic5dcodename"},
     {"mDataProp": "asiccprodcodename"},
     {"mDataProp": "unit_name"},
     {"mDataProp": "prod_quantity"},
     {"mDataProp": "prod_value"}
  ]
});

您可以添加要在fnRender功能

中显示的任何html代码

答案 1 :(得分:0)

使用mrender属性 -

$('#newItemBasketTab').dataTable({
  "aaData": result.itembasketdata,
  "aoColumnDefs": [
    {
      "aTargets": [ 0 ],
      "mData": "ID",
      "mRender": function ( data, type, full ) {
        var checked = "checked";
        if(data) { checked = "checked"; }
        return "<input type='checkbox' checked='" + checked + "'>";
      }
    },
    {"mData": "nic5dcodename"},
    {"mData": "asiccprodcodename"},
    {"mData": "unit_name"},
    {"mData": "prod_quantity"},
    {"mData": "prod_value"}
  ]
});

DOCS