javascript - 子行总是在 datatables.net 中展开

Question

我使用 datatables.net 创建了父子行表。单击一行时，将显示子行。但我希望 child 总是在没有任何点击事件的情况下打开。有人可以建议我如何实现吗

这是我的代码

 var ecumTbl= S$("#EncumbranceSummaryTable").DataTable(
        {                        
            "footerCallback": function ( row, data, start, end, display ) {                  
                var api = this.api(), data;

                // Remove the formatting to get integer data for summation
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                        i : 0;
                };
                // Total over all pages
                if(api.column(3).data().length)
                {
                    total = api
                    .column( 1 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    } );
                }
                else
                {
                    total =0
                };


                // Total over this page
                if(api.column(3).data().length)
                {
                    pageTotal = api
                        .column( 3, { page: 'current'} )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    // Update footer
                    $( api.column(2).footer() ).html(
                        'Contract Total'
                    );
                    $( api.column(3).footer() ).html(
                       formatCurrency(pageTotal)
                  );

                }
                else{
                    pageTotal=0;
                };
            },

                        "aoColumns": [

                                    {
                                        "sTitle": "", "sWidth": "10%"
                                    },
                                                { "sTitle": "Sub total for PO #", "mData": "PO_Num", "sWidth": "15%" },
                                                { "sTitle": "Encumbrance","mData": "Encumbrance", "sWidth": "35%" },
                                                { "sTitle": "Release","mData": "Release", "sWidth": "45%" },  
                                                 { "sTitle": "Paid","mData": "Paid", "sWidth": "45%" },
                                                 { "sTitle": "Balance","mData": "Balance", "sWidth": "45%" },                                            

                        ],
                        "paging": false,
                        "ordering": false,
                        "data": Customers,
                        "info": false,
                        "bJQueryUI": true,
                        'sDom': 't',
                        "columnDefs": [{
                            "targets": [0],
                            "bSearchable": false,
                            "bSortable": false,
                            "className": 'details-control',
                            "mData": null,
                            "defaultContent": '',                               
                        }]
        });

    //On row click show child table
    $('#EncumbranceSummaryTable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = ecumTbl.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(row.data()) ).show();
            tr.addClass('shown');
            var innerPOTbl= S$("#innerPOTable").DataTable(
                   {
                       "bJQueryUI": true,
                       "aoColumns": [                               
                                               { "sTitle": "FY", "mData": "fiscalYrs", "sWidth": "20%" },
                                               { "sTitle": "Ln","mData": "ln", "sWidth": "15%" },
                                               { "sTitle": "F/F/A","mData": "ffa", "sWidth": "30%" }, 
                                               { "sTitle": "Project ID", "mData": "projectID", "sWidth": "25%" },
                                               { "sTitle": "Source Type","mData": "sourceType", "sWidth": "30%" },
                                               { "sTitle": "Encumbrance","mData": "encumbrance", "sWidth": "35%" }, 
                                               { "sTitle": "Released","mData": "released", "sWidth": "35%" }, 
                                               { "sTitle": "Paid","mData": "paid", "sWidth": "35%" },
                                               { "sTitle": "Balance","mData": "balance", "sWidth": "35%" },                                               

                       ],
                       "sDom": 'lfrtip',    
                       "data":PurchaseOrderList,
                       "paging": false,
                       "ordering": false,                         
                       "info": false,
                       "bJQueryUI": false,               
                   });      
        }
    });

Answer 1

另一种解决方案使用数据表“draw”事件。我发现此解决方案更舒适，因为它是 Datatables 对象的一部分并放置在“绘制”事件中，确保它仅在表完全初始化后触发，然后在每个绘制事件上执行。

var table = $('#sample')
  .DataTable({
    // your table configuration...
  })
  .on('draw.dt', function () {
    table.rows().every(function () {
      this.child(format(this.data())).show();
      this.nodes().to$().addClass('shown');
      // this next line removes the padding from the TD in the child row 
      // In my case this gives a more uniform appearance of the data
      this.child().find('td:first-of-type').addClass('child-container')
    });
});

// this is my format function for the child data
//  do as you need for your case
function format(d) {
  // `d` is the original data object for the row
  return  '<table class="row-detail">' +
          '<tr>' +
            '<td title="State">' + d.rState + '</td>' +
            '<td title="Comment">' + d.rComment + '</td>' +
            '<td title="Category">' + d.rCategory + '</td>' +
          '</tr>' +
          '</table>';
}

这是子 TD 及其表格的样式类。

<style>
    .child-container{
        padding: 0 !important;
    }

    table.row-detail {
        border-collapse: collapse;
        width: 100%;
    }

    table.row-detail td {
        padding: 5px 10px !important;
        border-right: 1px solid #ddd;
    }

</style>