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?

meowcatmeowcat Posts: 4Questions: 2Answers: 0

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

  • meowcatmeowcat Posts: 4Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 21,270Questions: 26Answers: 4,935
    Answer ✓

    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

Sign In or Register to comment.