DataTables child row responsive problem

Run the script then resize the window, then click the class title cell to see replacement of responsive displayed cell data.

by Laura Hammond

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<table id="EF_event_table" class="EF_event_table" width="100%">
  <thead class="espresso-table-header-row">
    <tr>
      <th>Class Title</th>
      <th>Day</th>
      <th class="dt-head-center">Eastern Time</th>
      <th>Pacific Time</th>
      <th>Grade Range</th>
      <th>Start Date</th>
      <th class="EF_grade_min" style="display:none">Min Grade</th>
      <th class="EF_grade_max" style="display:none">Max Grade</th>
      <th class="EF_subject" style="display:none">Subject</th>
      <th class="EF_waitlist" style="display:none">Is Waitlist</th>
      <th class="EF_instructor" style="display:none">Instructor</th>
      <th>Open Spots</th>
      <th>Price</th>
      <th>Availability</th>
      <th>Desc</th>
    </tr>
  </thead>
  <tbody>
    <tr id="EF_event_row-1" class="EF_event_row">
      <td class="EF_event_title" data-th="Title">Some Class</td>
      <td data-th="Day">M</td>
      <td class="dt-nowrap EF_est" data-th="Eastern Time">9:30 am</td>
      <td class="dt-nowrap EF_pst" data-th="Pacific Time">6:30 am</td>
      <td class="dt-nowrap EF_event_grades col_5" data-th="Grades"><span>05th - adult</span></td>
      <td class="center" data-th="Start Date">Jan 12, 2017</td>
      <td class="EF_grade_min" style="display:none">5</td>
      <td class="EF_grade_max" style="display:none">13</td>
      <td class="EF_subject" style="display:none">4</td>
      <td class="EF_waitlist" style="display:none">0</td>
      <td class="EF_instructor" style="display:none">James York</td>
      <td class="EF_event_openspots col_6" data-th="Open Spots">15</td>
      <td class="EF_event_price col_9" data-th="Price"><span>
          	 <p id="p_event_price-1" class="event_price"> $300.00</p>
         </span></td>
      <td class="dt-nowrap...

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 td.EF_event_title {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.EF_event_title {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

$(document).ready(function () {
      var table = $('#EF_event_table').DataTable({
	      "dom": 'firtlp',
			"responsive": true, 
			"autoWidth": false,
			"columnDefs": [ 
				{ targets: [0,13], responsivePriority: 1}, 
				{ targets: [12,2,1], responsivePriority: 2}, 
				{ targets: [3,10], responsivePriority: 10001}, 
     		{ targets: [ 1, 2, 3 ], className: "dt-nowrap dt-center" },
     		{ "visible": false, "targets": [6,7,8,9,14] }
			]       
      });

      // Add event listener for opening and closing details
      $('#EF_event_table').on('click', 'td.EF_event_title', 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
			      	var theDesc = row.data()[14];
     				 	row.child(theDesc).show();
              tr.addClass('shown');
          }
      });
  });