How to pass in data to display for Child Rows when using DJango?
How to pass in data to display for Child Rows when using DJango?
![meowcat](https://secure.gravatar.com/avatar/5e2d6dc28f7ec51b23a1c1f3cf3204be/?default=https%3A%2F%2Fvanillicon.com%2F5e2d6dc28f7ec51b23a1c1f3cf3204be_200.png&rating=g&size=120)
I am having trouble figuring out how to pass data into my child row to display. I am using the example code from (https://datatables.net/examples/api/row_details.html) and creating my rows using a for loop with Django.
With 8 columns per row (The first one being blank for the button), I am not sure what data is being passed to the 'function format' as the data and how to choose what is getting passed. Also, is it possible to make an HX-GET call when the child row expand button is pressed?
Thank you for any help!
<table id="example" class="cell-border">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tbody>
{% for item in context.items%}
<tr>
<td></td>
<td>{{ item.attribute1}}</td>
<td>{{ item.attribute2}}</td>
<td>{{ item.attribute3}}</td>
<td>{{ item.attribute4}}</td>
</tr>
</tbody>
</thead>
</table>
<script type="text/javascript">
$(document).ready(function(){
// Initialize the DataTable
var table = $('#example').DataTable({
columns: [
{ className: 'dt-control', orderable: false, data: null, defaultContent: '' },
{ data: 'attribute1' },
{ data: 'attribute2' },
{ data: 'attribute3' },
{ data: 'attribute4' },
],
columnDefs: [
{
targets: 1,
width: '5'
},
{
targets: 2,
width: '45%'
},
{
targets: 3,
width: '35%'
},
{
targets: 4,
width: '5'
},
{
targets: 0,
className: 'dt-body-center'
},
{
targets: [1,2,3,4,5,6,7],
className: 'dt-body-right'
},
],
"oLanguage": {
"sSearch": "Criteria Filter"
},
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.dt-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
} else {
// Open this row
row.child(format(row.data())).show();
}
});
// Formatting function for row details - modify as needed
function format(data) {
return (
'<dl>' +
'<dt>Invoice Number:</dt>' +
'<dd>' + data.attribute1+ '</dd>' +
'<dt>Extension number:</dt>' +
'<dd>' + data.attribute2+ '</dd>' +
'<dt>Extra info:</dt>' +
'<dd>And any further details here (images etc)...</dd>' +
'</dl>'
);
}
});
</script>
This question has an accepted answers - jump to answer
Answers
Stumbled upon an old discussion that I think answers my first question, please feel free to close, sorry for the trouble!
This passes in the data from the clicked row. You can supply the child row data in the original JSON data for each row. No need to assign the child data to the
columns
option.This blog shows how to load child row data via Ajax.
Kevin