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

Posted 2023-05-09

【中文标题】数据表中的复选框选中状态

【英文标题】：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 正在返回一个值形式的“位”数据类型。非常感谢

【参考方案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>