无法从jquery数据表中检索数据

时间：2017-06-03 23:29:55

标签： datatables

我的下面的代码段显示了一个有3行的数据表示例，我在列定义中添加了一个额外的列＆＃34; action＆＃34;我分别通过默认内容和渲染功能设置其显示/数据。

每当我尝试构建包含列＆＃34; action＆＃34;的JSON数据时我失败了。我添加了单元格单击侦听器（在此操作中已禁用），只是为了确保数据存储在API数据集合中，确实存在，但在构建值后无法显示。

如果你点击＆＃34;建立vals＆＃34;你会看到＆＃34;动作＆＃34;数据不包含在JSON中。如果你点击＆＃34;标记为删除＆＃34;然后＆＃34;建立vals＆＃34; ＆＃34;行动＆＃34;数据会显示出来。

任何想法如何让它发挥作用？

＆＃13;
＆＃13; 
var tablenest = $('#RegSrc').DataTable({
  select: true,
  "bPaginate": false,
  "bFilter": false,
  responsive: true,
  deferRender: true,
  "processing": true,
  "serverSide": false,
  bAutoWidth: true,
  data: [{
    "RecID": 2383,
    "PtFilenum": 15090248,
    "PrtFilenum": 13090701,
    "Fullname": "Salem",
    "PrtStatus": 1
  }, {
    "RecID": 2384,
    "PtFilenum": 15090248,
    "PrtFilenum": 15120996,
    "Fullname": "Tony",
    "PrtStatus": 1
  }, {
    "RecID": 2385,
    "PtFilenum": 15090248,
    "PrtFilenum": 170227111,
    "Fullname": "Jorge",
    "PrtStatus": 1
  }],
  order: [2, 'asc'],
  keys: {
    columns: ':not(:first-child)',
    keys: [9]
  },
  columns: [
  { // Checkbox select column
      data: null,
      defaultContent: '',
      className: 'select-checkbox',
      orderable: false,
      "width": "1%"
    },
    {
      "width": "50%",
      data: "RecID",
      "visible": false
    },
    {
      "width": "50%",
      data: "PtFilenum",
      "visible": false
    },
    {
      "width": "10%",
      data: "PrtFilenum"
    },
    {
      "width": "40%",
      data: "Fullname"
    },
    {
      "width": "10%",
      data: "PrtStatus",
      render: function(data, type, row) {
        if (type === 'display') {
          if (data == 1) {
            return 'Partners';
          } else {
            return 'Not Partners';
          }
        }
        return data;
      },
      className: "dt-body-center"
    },
    {
      "width": "10%",
      data: 'action',
      defaultContent: 'update',
      orderable: false,
      className: "dt-body-center",
      "visible": true,
      render: function(data, type, row) {
        if (data == null) {
          return 'update';
        } else {
          return data;
        }
      }
    },
  ],

});
  /* $('#RegSrc tbody').on('click', 'td', function () {
                        console.log(tablenest.cell(this).data());
                    });*/
$("#btn1").click(function() {
  tablenest.rows({
    selected: true
  }).every(function(rowIdx, tableLoop, rowLoop) {
    tablenest.row(this).cell(rowIdx, 6).data('delete').draw()
    var row = tablenest.row(this).node();
    $(row).css('color', 'red').animate({
      color: 'black'
    });
  });
  return false;
})
$("#btn2").click(function() {
  var tbldta = $.map(tablenest.rows().data(), function(d, i) {
    var myObject = new Object();
    myObject = {
      action: d.action,
      RecID: d.RecID,
      PrtStatus: d.PrtStatus,
      ptfilenum: d.PtFilenum,
      PrtFilenum: d.PrtFilenum
    }
    return myObject
  });
  var DtaObj = {}
  DtaObj.Data = tbldta
  console.log(JSON.stringify(DtaObj))
  return false;
})
＆＃13; 
<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="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.15/b-1.3.1/se-1.2.2/datatables.min.js"></script>

<button id="btn2" class="btn btn-primary">build vals</button>
<button id="btn1" class="btn btn-primary">Mark For Delete</button>
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none display responsive nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
    <th>click here to select</th>
      <th><b>RecID</b></th>
      <th><b>Patient File Number</b></th>
      <th><b>Partner File Number</b></th>
      <th><b>Patient Name</b></th>
      <th><b>Status</b></th>
      <th><b>action</b></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

在构造函数中包含“action”：“update”到您的数据源。

  

columns.defaultContent是静态的，因此无法访问   数据。

您也可以从“操作”列中删除呈现。

var tablenest = $('#RegSrc').DataTable({
  select: true,
  "bPaginate": false,
  "bFilter": false,
  responsive: true,
  deferRender: true,
  "processing": true,
  "serverSide": false,
  bAutoWidth: true,
  data: [{
    "RecID": 2383,
    "PtFilenum": 15090248,
    "PrtFilenum": 13090701,
    "Fullname": "Salem",
    "PrtStatus": 1,
    "action": "update"
  }, {
    "RecID": 2384,
    "PtFilenum": 15090248,
    "PrtFilenum": 15120996,
    "Fullname": "Tony",
    "PrtStatus": 1,
    "action": "update"
  }, {
    "RecID": 2385,
    "PtFilenum": 15090248,
    "PrtFilenum": 170227111,
    "Fullname": "Jorge",
    "PrtStatus": 1,
    "action": "update"
  }],
  order: [2, 'asc'],
  keys: {
    columns: ':not(:first-child)',
    keys: [9]
  },
  columns: [
  { // Checkbox select column
      data: null,
      defaultContent: '',
      className: 'select-checkbox',
      orderable: false,
      "width": "1%"
    },
    {
      "width": "50%",
      data: "RecID",
      "visible": false
    },
    {
      "width": "50%",
      data: "PtFilenum",
      "visible": false
    },
    {
      "width": "10%",
      data: "PrtFilenum"
    },
    {
      "width": "40%",
      data: "Fullname"
    },
    {
      "width": "10%",
      data: "PrtStatus",
      render: function(data, type, row) {
        if (type === 'display') {
          if (data == 1) {
            return 'Partners';
          } else {
            return 'Not Partners';
          }
        }
        return data;
      },
      className: "dt-body-center"
    },
    {
      "width": "10%",
      data: 'action',
      orderable: false,
      className: "dt-body-center",
      "visible": true
    },
  ],

});
  /* $('#RegSrc tbody').on('click', 'td', function () {
                        console.log(tablenest.cell(this).data());
                    });*/
$("#btn1").click(function() {
  tablenest.rows({
    selected: true
  }).every(function(rowIdx, tableLoop, rowLoop) {
    tablenest.row(this).cell(rowIdx, 6).data('delete').draw()
    var row = tablenest.row(this).node();
    $(row).css('color', 'red').animate({
      color: 'black'
    });
  });
  return false;
})
$("#btn2").click(function() {
  var tbldta = $.map(tablenest.rows().data(), function(d, i) {
    var myObject = new Object();
    console.log(d);
    myObject = {
      action: d.action,
      RecID: d.RecID,
      PrtStatus: d.PrtStatus,
      ptfilenum: d.PtFilenum,
      PrtFilenum: d.PrtFilenum
    }
    return myObject
  });
  var DtaObj = {}
  DtaObj.Data = tbldta
  console.log(JSON.stringify(DtaObj))
  return false;
})
<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="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.15/b-1.3.1/se-1.2.2/datatables.min.js"></script>

<button id="btn2" class="btn btn-primary">build vals</button>
<button id="btn1" class="btn btn-primary">Mark For Delete</button>
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none display responsive nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
    <th>click here to select</th>
      <th><b>RecID</b></th>
      <th><b>Patient File Number</b></th>
      <th><b>Partner File Number</b></th>
      <th><b>Patient Name</b></th>
      <th><b>Status</b></th>
      <th><b>action</b></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

相关问题
最新问题