数据表中的复选框选中状态答案

【问题标题】：Checkbox Checked state in Datatables数据表中的复选框选中状态
【发布时间】：2017-10-08 19:56:15
【问题描述】：

下面的代码 sn-ps 显示了我的 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>

【问题讨论】：

更改记录值会影响该行，[{"PrtFilenum":13090701,"Fullname":" sadden ","PrtStatus":1}, {"PrtFilenum":15120996,"Fullname" :"marwam mohmmad saleem","PrtStatus":0},{"PrtFilenum":170227111,"Fullname":"asd dsf a","PrtStatus":1}],,, 这个将返回未选中的复选框记录在中间
是的，确实如此。我的 webmethod 读取 sql 数据并将其转换为上述 JSON。 sql 正在返回一个值形式的“位”数据类型。非常感谢

标签： jquery json checkbox datatables asp.net-ajax

【解决方案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>

【讨论】：