$(document).ready(function () {
var serverData = [
]
var table = $('#example').DataTable({
language : {
"zeroRecords": " "
},
data: serverData,
columns: [
{ data: "name" },
{ data: "age" },
{ data: "isActive" },
{ data: "friends" },
],
'columnDefs': [{
'targets': 2,
'render': function (data, type, full, meta) {
let checked = ''
if (data) {
return '<input type="checkbox" checked / >';
}
else {
return '<input type="checkbox" / >';
}
return data;
}
},
{
'targets': 3,
"render": function (data, type, full, meta) {
var selectInitial = "<select>";
var selectClosing = "</select>";
var options = '';
$.each(data, function (key, value) {
options = options+"<option value="+value.id+">"+value.name+"</option>";
});
return selectInitial+options+selectClosing;
}
}
],
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'></script><link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.css'>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>isActive</th>
<th>friends</th>
</tr>
</thead>
</table>