Question

当在相应的行上单击图标时，我使用以下函数来控制子行的显示。

如何在没有点击的情况下显示加载的特定子行？

$('#example tbody').on('click', 'td.details-control', function () {     
    var tr = $(this).closest('tr');
    var row = table.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');
    }
} );

Answer 1

<强>解

使用click事件处理程序的命名函数替换匿名函数，例如onRowDetailsClick，如下所示。

function onRowDetailsClick(table){
   var tr = $(this).closest('tr');
   var row = table.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');
   }
}

// ... skipped ...

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function (){
    onRowDetailsClick.call(this, table);
});

然后您需要使用initComplete选项在特定行上调用onRowDetailsClick，如下所示：

'initComplete': function(settings){
   var api = new $.fn.dataTable.Api(settings);

   // Open 12th row, zero-based index
   api.$('tr').
      .eq(11)
      .find('td.details-control')
      .each(function(){
         onRowDetailsClick.call(this, api);
      });

/*
   // Open rows with class .open
   api.$('tr.open').
      .find('td.details-control')
      .each(function(){
         onRowDetailsClick.call(this, api);
      });
*/

}

<强>样本

＆＃13;

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" width="100%">'+
        '<tr>'+
            '<td>Salary:</td>'+
            '<td>'+d[5]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Start date:</td>'+
            '<td>'+d[4]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

function onRowDetailsClick(table){
   var tr = $(this).closest('tr');
   var row = table.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');
   }
}

$(document).ready(function() {
  
    var table = $('#example').DataTable( {
        'ajax': 'https://api.myjson.com/bins/qgcu',
        'columns': [
            {
                'className':      'details-control',
                'orderable':      false,
                'data':           null,
                'defaultContent': ''
            },
            { 'data': 0 },
            { 'data': 1 },
            { 'data': 2 },
            { 'data': 3 }
        ],
        'order': [[1, 'asc']],
        'initComplete': function(settings){
           var api = new $.fn.dataTable.Api(settings);
          
           // Open 12th row, zero-based index
           api.$('tr')
              .eq(11)
              .find('td.details-control')
              .each(function(){
                 onRowDetailsClick.call(this, api);
              });
        }
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function (){
       onRowDetailsClick.call(this, table);
    });
} );

＆＃13;

td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

＆＃13;

<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

<table id="example" class="stripe row-border order-column compact">
<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Ext</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Ext</th>
    </tr>
</tfoot>
</table>

＆＃13;

Answer 2

您可以在DataTable init调用之后立即执行此操作。例如：

$(function(){    
    var table = $('#example').DataTable({
        // ToDo: Your DataTable options HERE
    })

    var openDetailRow = function(tr){
        var row = table.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');
        }
    };

    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        openDetailRow( tr );
    });

    // Just a guess on which would be the first to show.
    // Replace with whichever one should be shown.
    var initialRowToShowDetails = $('#example tbody tr').first();
    openDetailRow(initialRowToShowDetails);
});

你甚至可以在绑定事件之前做到这一点，但我倾向于尽早绑定事件。

如何在没有单击的情况下显示加载的特定子行

2 个答案: