最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - DataTables - Open all Child Rows on Page Load - Stack Overflow

programmeradmin4浏览0评论

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. /

// This function is for displaying data from HTML "data-child-value" tag in the Child Row.
function format(value) {
      return '<div>Hidden Value: ' + value + '</div>';
  }

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

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. https://jsfiddle/6k0bshb6/30/

// This function is for displaying data from HTML "data-child-value" tag in the Child Row.
function format(value) {
      return '<div>Hidden Value: ' + value + '</div>';
  }

// 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');
          }
    }); 
Share Improve this question edited May 23, 2016 at 16:19 mitchelangelo asked May 23, 2016 at 15:56 mitchelangelomitchelangelo 8994 gold badges16 silver badges45 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

Use the code below to show all child rows:

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

See updated jsFiddle for code and demonstration.

See jQuery DataTables: How to expand/collapse all child rows for more examples and information.

发布评论

评论列表(0)

  1. 暂无评论