DataTable 子行未显示

Posted 2023-05-08

【中文标题】DataTable 子行未显示

【英文标题】：DataTable child rows aren't showing up

【发布时间】：2016-10-15 05:40:14

【问题描述】：

我尝试使用 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 显示了行为 我如何知道要将行添加到哪个表？

【问题讨论】：

我在您的代码中没有看到任何与 td.details-control 选择器匹配的内容。

当我初始化 DataTable 时，我将“details-control”类添加到第一列。检查JS代码开头的调用。

您填充数据的方式可能有问题，因为 jsfiddle.net/xe18dh1u 正在为我工​​作（使用占位符数据）。

你的小提琴让我意识到我有一个问题，因为我在同一页面上有 2 个这样的表（一个是隐藏的）。我在您的 html 中添加了第二个表，似乎子行正在添加到第二个表中。 （在我的情况下是隐藏的）。我该如何解决这个问题？

这是更新后的小提琴：jsfiddle.net/u4nze1tf（有 2 个表）。

【参考方案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/