DataTable 子行未显示

Question

我尝试使用 DataTables 中的子行功能，但我做错了什么，不确定是什么。 （我是 DataTables 的新手） 我正在尝试添加一些静态子行，只是为了看看它是否正常工作（没有 AJAX）。 单击第一列只会将“显示”类添加到行中，但不会添加子行。

此外，不会引发错误。

我从here 中效仿他们的示例，删除了 AJAX 数据。 我知道这在我的示例中没有任何意义（单击一个图标并显示该链接中的表格），但我只想逐步进行。

这是我现在得到的：

HTML：

<table id='<%= league.name %>' class="event-table display responsive no-wrap">
          <thead>
          <tr>
            <th class="event-badge"></th>
            <th class="event-shirt"></th>
            <th class="event-team"></th>
            <th class="event-dash"></th>
            <th class="event-team"></th>
            <th class="event-shirt"></th>
            <th class="event-badge"></th>
          </tr>
          </thead>
          <tbody>
          <% events.each do |event| %>
              <tr class="event-row">
                <td class="event-badge"><%= image_tag event.home_team.badge_url, :class => 'team-badge' %></td>
                <td class="event-shirt"><%= image_tag event.home_team.shirt_url, :class => 'team-shirt' %></td>
                <td class="event-team"><%= event.home_team.name %></td>
                <td class="event-dash"> - </td>
                <td class="event-team"><%= event.away_team.name %></td>
                <td class="event-shirt"><%= image_tag event.away_team.shirt_url, :class => 'team-shirt' %></td>
                <td class="event-badge"><%= image_tag event.away_team.badge_url, :class => 'team-badge' %></td>
              </tr>
          <% end %>
          </tbody>
</table>

JS：

var table = $('.event-table').DataTable({
    "bJQueryUI": true,
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    "columns": [
        {
            "className": "details-control",
            "data": "badge-home"
        },
        {
            "data": "shirt-home"
        },
        {
            "data": "name-home"
        },
        {
            "data": "dash"
        },
        {
            "data": "name-away"
        },
        {
            "data": "shirt-away"
        },
        {
            "data": "badge-away"
        }
    ]
});

$('.event-table 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() ).show();
        tr.addClass('shown');
    }
} );

function format ( ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
    '<td>Full name:</td>'+
    '<td>Something</td>'+
    '</tr>'+
    '<tr>'+
    '<td>Extension number:</td>'+
    '<td>Something</td>'+
    '</tr>'+
    '<tr>'+
    '<td>Extra info:</td>'+
    '<td>And any further details here (images etc)...</td>'+
    '</tr>'+
    '</table>';
}

更新

我没有说明我在同一页面上有多个这样的表格。只有一个可见。实际上添加了子行，但在错误的表上。 这个fiddle 显示了行为 我如何知道要将行添加到哪个表？

Answer 1

您似乎指的是由 DataTables 创建的表对象。但是，如果您有多个由同一个调用初始化的表，则您的表对象将仅引用其中一个表（具有不可预测的结果）。最好的办法是在表数据中存储对每个表对象的引用。

像这样重写初始化部分：

$(.event-table).each(function () { 
var table = $(this).DataTable({
    "bJQueryUI": true,
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    "columns": [
        {
            "className": "details-control",
            "data": "badge-home"
        },
        {
            "data": "shirt-home"
        },
        {
            "data": "name-home"
        },
        {
            "data": "dash"
        },
        {
            "data": "name-away"
        },
        {
            "data": "shirt-away"
        },
        {
            "data": "badge-away"
        }
    ]
});
$(this).data("dataTableObject", table);
});
$('.event-table tbody').on('click', 'td.details-control', function () {
    var table = $(this).closest(".event-table").data("dataTableObject");
    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() ).show();
        tr.addClass('shown');
    }
} );

function format ( ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
    '<td>Full name:</td>'+
    '<td>Something</td>'+
    '</tr>'+
    '<tr>'+
    '<td>Extension number:</td>'+
    '<td>Something</td>'+
    '</tr>'+
    '<tr>'+
    '<td>Extra info:</td>'+
    '<td>And any further details here (images etc)...</td>'+
    '</tr>'+
    '</table>';
}

小提琴示例：

https://jsfiddle.net/u4nze1tf/1/