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/

DataTable子行未显示

1 个答案: