Display Child Rows (Always Open)

Display Child Rows (Always Open)

code-connoisseurcode-connoisseur Posts: 19Questions: 5Answers: 1

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');
          }
    });

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 55,097Questions: 1Answers: 8,651 Site admin

    There is an "always open" example available here.

    Allan

  • code-connoisseurcode-connoisseur Posts: 19Questions: 5Answers: 1

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

  • allanallan Posts: 55,097Questions: 1Answers: 8,651 Site admin

    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-connoisseurcode-connoisseur Posts: 19Questions: 5Answers: 1
    Answer ✓

    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

This discussion has been closed.