jquery - 数据表中的复选框选中状态

Question

下面的代码片段显示了我的 JSON 字符串和表的构成。返回时的复选框数据不会更改复选框的选中状态，知道为什么吗？由于 3 条记录的数据均为 1，因此该复选框应处于选中状态。

我厌倦了做这样的事情，但没有成功，

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>

Answer 1

您需要更改如下条件:-

if ( type === 'display' ) {
  if(data ==1){
    return '<input type="checkbox" checked>';
  }else{
    return '<input type="checkbox">';
  }
}

工作示例(使用您给定的代码和数据):-

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>