Checkbox Checked state in Datatables

Question

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>

changing the record value will affect that row,[{"PrtFilenum":13090701,"Fullname":" sadden ","PrtStatus":1}, {"PrtFilenum":15120996,"Fullname":"marwam mohmmad saleem","PrtStatus":0},{"PrtFilenum":170227111,"Fullname":"asd dsf a","PrtStatus":1}],,, this one will return unchecked checkbox for the record in the middle — JSON
– JSON, Commented May 10, 2017 at 9:11
Yes, indeed. My webmethod reads sql data and convert it to the above JSON. the sql is returning a value form "bit" data type. thanks so much — JSON
– JSON, Commented May 10, 2017 at 9:14

Death-is-the-real-truth · Accepted Answer · 2017-05-10 09:12:20Z

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>

Collectives™ on Stack Overflow

Checkbox Checked state in Datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related