复选框在Datatables中检查状态

时间:2017-05-10 08:59:11

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

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

1 个答案:

答案 0 :(得分:4)

您需要更改以下条件: -

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

工作示例(包含您的代码和数据): -

&#13;
&#13;
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"
    } 
  ],
});
&#13;
<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>
&#13;
&#13;
&#13;