Fail to retrieve data from jquery datatables - datatables

Question

My snippets below shows a datatables example that has 3 rows, I have added an extra column in column definition "action" and I m setting its display/data via default content and render functions respectively.
every time I try to build an JSON data containing the column "action" val i fail. I added the cell click listener (disabled in this action) just to make sure that the data is stored in the API data collection and it is indeed, yet it fails to show up after building the values.
if you click "build vals" you will see how the "action" data is not included in JSON. if you click "Mark for delete" and then "build vals" the "action" data will show up.
any idea how to make it work?
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>

Answer 1

Include "action":"update" to your data source in constructor.
columns.defaultContent is static and therefore cannot possibly access
the data.
Also you can remove render from "action" column.
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>