0

I am attempting to add the child row functionality to the datatables implementation in ruby on rails. At present I can get the general table to render, however, the functionality of the child row throws the error: Uncaught TypeError: Cannot read property 'mData' of undefined.

How can this be implemented in 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;
}
Dhiraj
  • 33,140
  • 10
  • 61
  • 78
Sauron
  • 6,399
  • 14
  • 71
  • 136
  • My table is well formed – Sauron May 04 '15 at 02:11
  • 1
    Would help a lot to see exactly _where_ the error occurs. The error does not "match" any of the give code. – davidkonrad May 04 '15 at 02:48
  • @muistooshort, `format()` is a typical copy paste error taken from the examples as datatables.net. It is completely unnessecary. The `` generated by `format()` does not need to be well formed since it is not datatabled'
    – davidkonrad May 04 '15 at 06:02
  • The issue was in fact becuase the table was not formatted correctly. See within the `` tag, there is no opening ``, for the adjoiing closing `` tag. Write up the answer if you wish – Sauron May 04 '15 at 14:19
  • @muistooshort Yes, I did not catch it until this morning, taking a step back and seeing the obvious issue – Sauron May 04 '15 at 14:32

0 Answers0