2017-06-03 25 views
0

我的代码片段显示了一个有3行的数据表示例,我在列定义“action”中增加了一个额外的列,并分别通过默认内容和渲染函数设置其显示/数据。无法从jquery数据表中检索数据

每次我尝试构建一个包含列“action”val的JSON数据失败时。我添加了单元格单击监听器(在此操作中禁用),以确保数据存储在API数据集合中,并且确实存在,但在构建值后却无法显示。

如果您单击“构建vals”,您将看到“action”数据未包含在JSON中。如果您单击“标记为删除”,然后“生成值”,则会显示“操作”数据。

任何想法如何使其工作?

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; 
 
})
<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>

回答

1

包括“动作”: “更新”在构造函数中您的数据源。

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>

+0

谢谢,我在做的话,我想可能是它周围的另一种方式:) – JSON