Generate child row using ajax and display its content
Generate child row using ajax and display its content
mastro_dino
Posts: 8Questions: 2Answers: 0
Hi, this is what I've done so far:
//generate table
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
"url": "../contents/cbk-data-process.php",
"async": false,
"data": {"method": "product-list",
"node": "$node"},
"dataType": "json",
"dataSrc": 'rpcresult',
"type": "POST"
},
columns: [{
className: 'nutrival',
orderable: false,
data: null,
defaultContent: '',
render: function(){
return '<i class="fa fa-plus-square" aria-hidden="trued"></i>'}
},
{data: "pcode" }],
"order": [[1, 'asc']]
} );
//open-close child row
$('#example tbody').on('click', 'td.nutrival', function () {
var tr = $(this).closest('tr');
//var tdi = tr.find("i.fa");
var row = table.row(tr);
if ( row.child.isShown()) { //close row if open
row.child.hide();
tr.removeClass('shown');
//tdi.first()removeClass('fa-minus-square');
//tdi.first()addClass('fa-plus-square');
}
else { //open row
row.child(nutrival(row.data()) ).show();
tr.addClass('shown');
//tdi.first()removeClass('fa-plus-square');
//tdi.first()addClass('fa-minus-square');
}
} );
} );
//working ajax call to server which contains elements to display in the child row
function nutrival ( rowData ) {
var div = $('<div/>')
.addClass( 'loading' )
.text( 'Loading...' );
$.ajax( {
"url": "../contents/cbk-data-process.php",
"async": false,
"data": {"method": "nutritional-values",
"node": "1",
"pcode": "30001"},
"dataType": "json",
"dataSrc": 'rpcresult',
"type": "POST",
success: function ( json ) {
div
.html( json.html )
.removeClass( 'loading' );
},
columns: [
{data: "AntiOx" },
{data: "Calories" },
{data: "Carbs" },
{data: "Fats" },
{data: "Fibers" },
{data: "Lipides" },
{data: "Proteins" },
{data: "Sat_fats" },
{data: "Sodium" },
{data: "Sugars" }
]
} );
return div;
}
//function that should display the actual child elements but is stuck on loading... instead
function format(d){
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<th>AntiOx:</th>' +
'<th>Calories:</th>' +
'<th>Carbs:</th>' +
'<th>...</th>' +
'</tr>' +
'</table>';
}
Both ajax calls are fine, I checked the browser log.
As I said in the title, I don't understand how the content is displayed and what should I do to make this work
This question has an accepted answers - jump to answer
Answers
See if this blog about ajax loaded detail rows helps.
Kevin
Thank you kthorngren, that is what I used as reference.
What I'd like to understand is how the data from the second ajax request should be displayed as a child row.
Right now when I click to open the child row the table shows a "Loading.." message, the request is sent and the server sends back the response but the "Loading..." message doesn't go away and the child row doesn't appear.
For completeness this is the result of the first request (all pcodes are displayed correctly in the table):
this is the result of the second one:
I don't see where you're calling your "format" function.
The
columnsyou have defined in line 68 is not doing anything. You are using jQuery ajax to fetch the data not Datatables.The code in line 64 will update the
divwith the JSON response and remove the loading message. My guess is that there is an error withjson.htmlbecause you don't have anhtmlproperty. Look at the browsers console for errors.You will need to change
json.htmlto match the structure returned from the server. Use the browser's network inspector tool on the blog page. Look at the XHR response when opening one of the child rows. You will see something like this:{"html":"Details for <b>Brenden Wagner<\/b><br><br>Full information could be derived from a database and potentially complex interactions such as charts, DataTables or other controls could be shown if required. In this demo only this summary is returned."}You will need to change the code in the success function to parse and display the response you are getting. There are no Datatables requirements for this. You just need to build proper HTML.
Kevin
Thank you Kevin for bearing with my incompetence.
As you can see in my previous comment, when opening one of the child rows I recive a JSON literal and I'm really not sure how to handle this inside
success: function ( json ).Do I remove this entirely?
Can I generate another table inside the child row using this JSON data? Sorry but I still don't get how this
divpart worksThat would be a good place to put the code to create the child row, so probably not.
You can, but you need to format. If you're getting back the JSON for the data, you would need to construct that child to use that data, adding in the HTML to get the formatting you want.
Colin
UPDATE: my JS now looks like this
Still not able to display #nutrival data, I guess it has something to do with the JSON that the server is sending. Any help would be highly appreciated
This blog will show how to display the child row as a Datatable. It also shows how to incorporate the Editor. You can ignore this portion of the code if you aren't using Editor for the child rows.
Kevin
Thanks everyone but now I'm 99% sure my problem is with the JSON from the second ajax request. Since it's just a simple object and not an array of objects I guess Datatable can't process it and it's not able to fill my single-row table.
Do you know if there is a way to make Datatable accept the object or do I have to convert it forcefully in an array?
The
ajaxoption expects an array of row data. You can useajax.dataSrcas a function to return the single row of data in an array. Or return the data in an array from your server script.Kevin