The code snippets below shows my JSON string and the makeup of my table. the checkbox data when returned is not changing the checkbox checked state, any idea why? since the data is 1 for all of the 3 records, the checkbox should have checked state.
I tired to do something like this but did not work,
return '<input type="checkbox value="' + data +' >';
var tablenest = $('#RegSrc').DataTable({
select: true,
"bPaginate": false,
"bFilter": false,
responsive: true,
deferRender: true,
"processing": true,
"serverSide": false,
bAutoWidth: true,
data:[{"PrtFilenum":13090701,"Fullname":" sadden ","PrtStatus":1},{"PrtFilenum":15120996,"Fullname":"marwam mohmmad saleem","PrtStatus":1},{"PrtFilenum":170227111,"Fullname":"asd dsf a","PrtStatus":1}],
columns: [
{ "width": "20%", data: "PrtFilenum" },
{ "width": "50%", data: "Fullname" },
{
"width": "30%",
data: "PrtStatus",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox">';
}
return data;
},
className: "dt-body-center"
}
],
});
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet" />
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none">
<thead>
<tr>
<th><b>File Number</b></th>
<th><b>Patient Name</b></th>
<th><b>Status</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You need to change condition like below:-
if ( type === 'display' ) {
if(data ==1){
return '<input type="checkbox" checked>';
}else{
return '<input type="checkbox">';
}
}
Working example (with your given code and data):-
var tablenest = $('#RegSrc').DataTable({
select: true,
"bPaginate": false,
"bFilter": false,
responsive: true,
deferRender: true,
"processing": true,
"serverSide": false,
bAutoWidth: true,
data:[{"PrtFilenum":13090701,"Fullname":" sadden ","PrtStatus":1}, {"PrtFilenum":15120996,"Fullname":"marwam mohmmad saleem","PrtStatus":0},{"PrtFilenum":170227111,"Fullname":"asd dsf a","PrtStatus":1}],
columns: [
{ "width": "20%", data: "PrtFilenum" },
{ "width": "50%", data: "Fullname" },
{
"width": "30%",
data: "PrtStatus",
render: function ( data, type, row ) {
if ( type === 'display' ) {
if(data ==1){
return '<input type="checkbox" checked>';
}else{
return '<input type="checkbox">';
}
}
return data;
},
className: "dt-body-center"
}
],
});
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet" />
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none">
<thead>
<tr>
<th><b>File Number</b></th>
<th><b>Patient Name</b></th>
<th><b>Status</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With