How to pass in data to display for Child Rows when using DJango?

meowcat

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>

meowcat

Stumbled upon an old discussion that I think answers my first question, please feel free to close, sorry for the trouble!

kthorngren

row.child(format(row.data())).show();

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