Datatable with html content
I am using jquery
datatable
and data entry in json
.
$('#newItemBasketTab').dataTable({
"aaData": result.itembasketdata,
"aoColumns":
[
{"mDataProp": "nic5dcodename"},
{"mDataProp": "asiccprodcodename"},
{"mDataProp": "unit_name"},
{"mDataProp": "prod_quantity"},
{"mDataProp": "prod_value"}
]
});
Now I want to check a checkbox in the first column datatable
and based on the ID field in the json
data, there checkbox
should be checked
or unchecked
. Is it possible to add html content to datatable
?
source to share
Use property 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"}
]
});
source to share
You will receive a code,
$('#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"}
]
});
You can add any HTML you want to display in the function fnRender
source to share