Display Child Rows (Always Open)

code-connoisseur

At the moment my table has child rows with a toggle to open each row in column 1. (I found this function online for managing the child rows) how can I change this so that child rows are always open so I can get rid of column one to make more room on mobile devices. https://jsfiddle.net/6k0bshb6/30/

// This function is for handling Child Rows.
    $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = dataTable.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
    });

allan

There is an "always open" example available here.

Allan

code-connoisseur

but i'm not using responsive my data is in the HTML tag data-child-value

allan

I think I understand now - sorry. Use the special class none which will cause the column to be hidden in the table but the data visible in the child row. Documentation.

Allan

code-connoisseur

No worries I've fixed it now allan, I used this code if anyone else needs it on the forum.

$("#example").DataTable().rows().every( function () {
    var tr = $(this.node());
    this.child(format(tr.data('child-value'))).show();
    tr.addClass('shown');
});

Thanks