How do I disable child-row button on specific row if one condition is match

tanjh

Description of problem:
How do i disable the child-row from showing up on specific row if one of the content from the main table column is match.

E.g Main-table

Query ID | Query Date | Requestor | Job Status
1 | 22-10-2023 | John | 'Ongoing'
" disable child row when Job Status is 'Ongoing' "
2 | 20-10-2023 | Mary | 'Completed'
"------------ show child row information -------------- "

Currently i have something like that:

<script type="text/javascript" class="init">
      // Formatting function for row details - modify as you need
      function format(d) {
          // `d` is the original data object for the row
          return (
              '<table id="child-row" class="child-row" >' +
                  '<thead>' +
                  '<tr>' +
                      '<td> Description </td>' +
                      '<td> Content </td>' +
                  '</tr>'+
                  '</thead>' +
                  '<tbody>' +
                  '<tr>' +
                      '<td> Traffic Count </td>' +
                      '<td>' + d.traffic_count + '</td>' +
                  '</tr>'+ 
                  '<tr>' +
                      '<td> Allowed Protocol/s </td>' +
                      '<td>' + d.get_allowed_protocol + '</td>' +
                  '</tr>'+
                  '<tr>' +
                      '<td> Blocked Protocol/s </td>' +
                      '<td>' + d.get_blocked_protocol + '</td>' +
                  '</tr>'+
                  '</tbody>' +
              '</table>'
          );
      }

      let table = new DataTable('#main-table', {
          ajax: "{% url 'query_json' %}",
          columns: [
              {
                  className: 'dt-control',
                  orderable: false,
                  data: null,
                  defaultContent: ''
              },
              { data: 'query.query_id' },
              { data: 'query.query_date' },
              { data: 'query.query_requestor' },
              { data: 'query.query_job_status' },
          ],
          order: [[1, 'asc']],
          info: false,
          ordering: false,
          paging: true,
          responsive: true,
          search: {
              return: true
          },
      });
      // Add event listener for opening and closing details
      table.on('click', 'td.dt-control', function (e) {
          let tr = e.target.closest('tr');
          let 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();
          }
      });
  </script>

allan

There are a few ways:

1) In your click event handler (line 56 in the above) put a conditional check to see if the click event handler should do anything. You could use row().data() to get the row's data and check it for the condition.

2) Use rowCreated to add a class to the rows you want to be open / closeable (dt-control for example, rather than just having the columns.className option apply it to all cells in the column). Use whatever logic condition to check if the class should be applied.

Option 2 is the better option since it would only look to the end user that something will happen on rows where something will actually happen. It just takes a line or two extra of code.

Allan

kthorngren

I built an example of number 2 a long time ago:
https://live.datatables.net/pifugoki/115/edit

Kevin