OPEN row child details in modal ?
OPEN row child details in modal ?
oh132
Posts: 4Questions: 4Answers: 0
Hello,
I want to know if it's possible to open the row child details in modal ( like searchbuilder on button ) ?
Actually, the data is under the parent row but I need to open in 'floating modal
$('#data tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
var index = row.index();
if ( row.child.isShown() ) {
row.child.hide();
}
else {
row.child(
'<table class="child_table" id="child_history'+index+'" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<thead><tr><th>action</th><th>action_time</th><th>name</th><th>field</th><th>old_value</th><th>new_value</th></tr></thead><tbody>' +
'</tbody></table>').show();
new DataTable('#child_history'+index, {
ajax: '/api/cms/history/host/'+row.data().name,
processing: true,
serverSide: true,
info: false,
filter: false,
columns: [
{ "data": "action" },
{ "data": "action_time" },
{ "data": "name" },
{ "data": "field" },
{ "data": "old_value" },
{ "data": "new_value" },
],
destroy: true,
scrollY: '400px'
});
row.child.show();
}
});
Any idea ?`
Answers
This should help you out. Not sure whether the example in the second link really works though.
https://datatables.net/reference/option/responsive.details.display
https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer.html
This one shows a Bootstrap modal:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
This has all the display options:
https://datatables.net/extensions/responsive/examples/display-types/index.html
The first two statements in your click event get the clicked row. Add a third statement to get the row data using
row().data(). Something like this:Using the row data you can populate and display a modal. Something like this example that uses alert().
Kevin