添加子行的数据表 - 未捕获的TypeError：无法读取未定义的属性“mData”

Question

我正在尝试将子行功能添加到ruby on rails中的datatables实现中。目前我可以获得要呈现的通用表，但是，子行的功能会引发错误：Uncaught TypeError: Cannot read property 'mData' of undefined。

如何在rails中实现？

info source：https://www.datatables.net/examples/api/row_details.html

show.html.erb：

<table id="campaignTable" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th></th>
         <th>id</th>
         <th>Active</th>
         <th>Name</th>
         <th>Image</th>
         <th>Begin</th>
         <th>End</th>
         <th>Budget</th>
         <th>Bid</th>
         <th>Avg. Placement</th>
         <th>Shares</th>
         <th>Clicks</th>
         <th>Routed</th>
      </tr>
   </thead>
   <tfoot id="input">
      <th></th>
      <th>id</th>
      <th>Active</th>
      <th>Name</th>
      <th>Image</th>
      <th>Begin</th>
      <th>End</th>
      <th>Budget</th>
      <th>Bid</th>
      <th>Avg. Placement</th>
      <th>Shares</th>
      <th>Clicks</th>
      <th>Routed</th>
      </tr>
   </tfoot>
   <%# current_user.locations.each do |branch| %>
   <tbody>
      <% @restaurant.campaigns.where(removed: 0).each do |campaign| %>
      <tr>
         <td></td>
         <td><%= campaign.id %></td>
         <td><% if campaign.is_active == true %>
            <font color="green"><%= 'Yes' %></font>
            <% else %>
            <font color="red"><%= 'No' %></font>
            <% end %>
         </td>
         <td><%= campaign.name %></td>
         <td><%= campaign.image %></td>
         <td><%= campaign.start_dt %></td>
         <td><%= campaign.end_dt %></td>
         <td><%= campaign.budget %></td>
         <td><%= campaign.bid_price %></td>
         <td><%= 'NEED TO ADD THIS' %></td>
         <td><%= campaign.texts %></td>
         <td><%= campaign.clicks %></td>
         <td><%= campaign.get_there %></td>
      </tr>
      <% end %>
   </tbody>
</table>

business_users.js.coffee：

jQuery ->
  console.log("business_users.coffee loaded")   

  $('#campaignTable').map ->
    # Function for the child rows of campaigns datatable
    format = (d) ->
    # `d` is the original data object for the row
      '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
          '<tr>'+
              '<td>Full name:</td>'+
              '<td>Test</td>'+
          '</tr>'+
          '<tr>'+
              '<td>Extension number:</td>'+
              '<td>test</td>'+
          '</tr>'+
          '<tr>'+
              '<td>Extra info:</td>'+
              '<td>And any further details here (images etc)...</td>'+
          '</tr>'+
      '</table>'

    # Setup - add a text input to each footer cell
    $("#campaignTable tfoot th").each ->
      title = $("#campaignTable thead th").eq($(this).index()).text()
      $(this).html "<input type=\"text\" placeholder=\"Search " + title + "\" />"

    # DataTable
    table = $("#campaignTable").DataTable(
      'columns': [
        {
          'className': 'details-control'
          'orderable': false
          'data': null
          'defaultContent': ''
        }
      ]
      'order': [ [
        1
      'asc'
      ] ])

      # Add search and other actions once this part works

  # Add event listener for opening and closing details
  $('#campaignTable tbody').on 'click', 'td.details-control', ->
    tr = $(this).closest('tr')
    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'
    return
  return

business_users.css.scss：

td.details-control {
    background: url('../images/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../images/details_close.png') no-repeat center center;
}