I want to obtain data from Datatables using its own API functions rather than using regular html table selectors. I m using the editor version too (not shown in the snippets) and I m using the Local table editing feature (I want to batch and send all the data at once)
I tried the following code and it accesses the API data but I can't skip cells.
var data = $('#PrtTbl').find('tr').map(function () {
return PrtTbl.row(this).data()
}).get()
console.log(JSON.stringify(data))
I want to apply this code which maps the HTML table and allows me to select certain cells but The Problem is that I can't figure out how to access the API stored data, Only the API functions can give me access to both stored data and hidden columns
var tbl = $('#RegSrc tr:has(td)').map(function(i, v) {
var $td = $('td', this);
return {
RecID: $td.eq(0).text(),
PtFilenum: $td.eq(1).text(),
Status: $td.eq(5).text()
} }).get();
My target out come would be like this
{
"data": {
"2383": {
"RecID": 2383,
"PtFilenum": "15090248",
"PrtFilenum": 13090701,
"PrtStatus": ""
},
"3387": {
"RecID": 3387,
"PtFilenum": "15090248",
"PrtFilenum": 15120996,
"PrtStatus": ""
},
"3388": {
"RecID": 3388,
"PtFilenum": "15090248",
"PrtFilenum": 170227111,
"PrtStatus": ""
}
}}
I have this snippet below showing the outcome for both codes
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": " sadden ",
"PrtStatus": 1
}, {
"RecID": 2384,
"PtFilenum": 15090248,
"PrtFilenum": 15120996,
"Fullname": "marwam mohmmad saleem",
"PrtStatus": 1
}, {
"RecID": 2385,
"PtFilenum": 15090248,
"PrtFilenum": 170227111,
"Fullname": "asd dsf a",
"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"
},
],
});
$("#btn1").click(function() {
var tbl = $('#RegSrc tr:has(td)').map(function(i, v) {
var $td = $('td', this);
return {
RecID: $td.eq(0).text(),
PtFilenum: $td.eq(1).text(),
Status: $td.eq(5).text()
}
}).get();
console.log(JSON.stringify(tbl))
return false;
})
$("#btn2").click(function() {
var data = $('#RegSrc').find('tr').map(function() {
return tablenest.row(this).data()
}).get()
console.log(JSON.stringify(data))
return false;
})
$("#btn3").click(function() {
var tbl = $('#RegSrc tr:has(td)').map(function(i, v) {
return {
RecID: tablenest.cell(this, 1).data(),
PtFilenum: tablenest.cell(this, 2).data(),
PrtFilenum: tablenest.cell(this, 3).data(),
PrtStatus: tablenest.cell(this, 5).data()
}
}).get();
console.log(JSON.stringify(tbl))
return false;
})<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="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="btn1" class="btn btn-primary">Code1</button>
<button id="btn2" class="btn btn-primary">Code2</button>
<button id="btn3" class="btn btn-primary">Code3</button>
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th></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>
</tr>
</thead>
<tbody>
</tbody>
</table>Update I added this code and it seems that its working,
var tbl = $('#RegSrc tr:has(td)').map(function(i, v) {
return {
RecID: tablenest.cell(this, 1).data(),
PtFilenum: tablenest.cell(this, 2).data(),
PrtFilenum: tablenest.cell(this, 3).data(),
PrtStatus: tablenest.cell(this, 5).data()
} }).get();
But I can't still achieve the desired outcome
Any help please?
