Can the example "Child rows..." handle just a table instead "ajax"

mschumacher777

I've been pondering for the past day about the example Child rows (show extra / detailed information).

Is it possible to use DataTables to use something like below for the Child Rows (see code snip below with table id of "dataTable" - yeah, bad name)? The sample is actual development data that is history of all, we would like the latest history to be displayed, then when the user click the "+", it would expand to show all the history.

For example, this is the output currently:

R   3WC9GGV Oct 15 2015 FOX SWIPER  Jul 01 2016 Jul 02 2016     SelectSpot
R   3WC9GGV Oct 15 2015 FOX SWIPER  Jul 01 2016 Jul 02 2016     SelectSpot
A   3WC9GGV Oct 19 2015 FOX SWIPER  Jul 01 2016 Jul 02 2016     SelectSpot
R   3WC9HFW Oct 15 2015 FOX SWIPER  Jul 02 2016 Jul 03 2016     SelectSpot
R   3WC9HFW Oct 15 2015 FOX SWIPER  Jul 02 2016 Jul 03 2016     SelectSpot
R   3WC9HFW Oct 15 2015 FOX SWIPER  Jul 02 2016 Jul 03 2016     SelectSpot

I'd like this to display this way without expansion:

    + A 3WC9GGV Oct 19 2015 FOX SWIPER  Jul 01 2016 Jul 02 2016     SelectSpot
    + R 3WC9HFW Oct 15 2015 FOX SWIPER  Jul 02 2016 Jul 03 2016     SelectSpot

This is what it would be with expanded:

    - A 3WC9GGV Oct 19 2015 FOX SWIPER  Jul 01 2016 Jul 02 2016     SelectSpot
      R 3WC9GGV Oct 15 2015 FOX SWIPER  Jul 01 2016 Jul 02 2016     SelectSpot
      R 3WC9GGV Oct 15 2015 FOX SWIPER  Jul 01 2016 Jul 02 2016     SelectSpot
    + R 3WC9HFW Oct 15 2015 FOX SWIPER  Jul 02 2016 Jul 03 2016     SelectSpot

Here is the JSP that is working - names have been changed to protect the innocent.

<%@ include file="/common/taglibsref.jspf" %>

<script type="text/javascript" src="<c:url value="/js/jquery-1.12.2.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.dataTables.min.js"/>"></script>
<script>
     jQuery(document).ready(function() 
     {
       var objectArr = [];
          jQuery('.dataRow').each(function()
          {
                 var tdArr = this.getElementsByTagName("td");
                 var message = {
                       status:tdArr[0].innerHTML, 
                       histno:tdArr[1].innerHTML,
                       datemade:tdArr[2].innerHTML,
                       lastname:tdArr[3].innerHTML,
                       firstname:tdArr[4].innerHTML,
                       adate:tdArr[5].innerHTML,
                       ddate:tdArr[6].innerHTML,
                       processed:tdArr[7].innerHTML,
                       select:tdArr[8].innerHTML
                       };
                 objectArr.push(message);
          });

          jQuery('#messageRows').DataTable( 
          {
         data: objectArr,
         "iDisplayLength": 15,
         "aLengthMenu": [[15, 25, 50, 100,-1], [15, 25, 50, 100, "All"]],
           "columns": [
               { "mData": "status" },
               { "mData": "histno" },
               { "mData": "datemade" },
               { "mData": "lastname" },
               { "mData": "firstname" },
               { "mData": "adate" },
               { "mData": "ddate" },
               { "mData": "processed" },
               { "mData": "select"}
           ],
           "order": [[ 1, "asc" ], [2,"asc"]],
    });

   });

</script>

<div class="crumbs">
<span class="leftcrumbs">
  <html:link action="/searchForm" name="searchForm" property="allParams">History</html:link>
  &gt;
  <span class="current">Search Results</span>
</span>
</div>

<div class="search">
<table cellspacing="0" cellpadding="0">
  <c:if test="${empty searchForm.searchResults}">
   <tr><td><span class="errors">No history have been found for the specified search criteria.<br><br></span></td></tr>
  </c:if>
</table>
</div>

<table id="messageRows" class="display compact" cellspacing="0" width="100%">
 <thead>
     <tr>
      <th>Status</th>
      <th>History</th>
      <th>Date Made</th>
      <th>Last Name</th>
      <th>First Name</th>
      <th>A Date</th>
      <th>D Date</th>
      <th>Processed</th>
      <th>Select</th>
     </tr>
   </thead>
 <tfoot>
     <tr>
      <th>Status</th>
      <th>Histoyr</th>
      <th>Date Made</th>
      <th>Last Name</th>
      <th>First Name</th>
      <th>A Date</th>
      <th>D Date</th>
      <th>Processed</th>
      <th>Select</th>
     </tr>
   </tfoot>
</table>

<table id="dataTable" style="display: none;">
   <c:forEach var="combo" items="${searchForm.searchResults}">
            <tr class="dataRow">
                    <td><c:out value="${history.status}"/></td>
                    <td><c:out value="${history.history}"/></td>
                    <td><fmt:formatDate pattern="MMM dd yyyy" value="${history.dateMade.date}"/></td>
                    <td><c:out value="${history.guest.lastName}"/></td>
                    <td><c:out value="${history.guest.firstName}"/></td>
                    <td><fmt:formatDate pattern="MMM dd yyyy" value="${history.dateSpan.beginDate}"/></td>
                    <td><fmt:formatDate pattern="MMM dd yyyy" value="${history.dateSpan.exclusiveEndDate}"/></td>
                    <td><c:out value="${history.processedFlag}"/></td>
                    <td>SelectSpot</td>
            </tr>
   </c:forEach>
</table>