Collapse_Expand

by Fantasy Land

HTML

<table width="100%" class="display" id="viewSummary" cellspacing="0">     
                    <thead>
                         <tr bgcolor="lightgray">
                            <th></th>
                            <th>
                                <s:text name="Name"/>
                            </th>
                            <th>
                                <s:text name="Address1"/>
                            </th>
                            <th>
                                <s:text name="Address2"/>
                            </th>
                            <th>
                                <s:text name="City"/>
                            </th>
                            <th>
                                <s:text name="Statet"/>
                            </th>
                            <th>
                                <s:text name="ZipCode"/>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <s:iterator value="msSummList" status="ms" var="msSummList">
                        <s:if test="#ms.even == true">
                            <tr bgcolor="lightgray" id='<s:property value="ms"/>' class="highlight">
                        </s:if>
                        <s:else>
                            <tr id='<s:property value="ms"/>' class="highlight">
                        </s:else>
                                <td></td>
                                <td>
                                    <s:property value="name"/>
                                </td>
                                <td >
                                    <s:property value="address1"/>
                                </td>
                                <td >
                                    <s:property value="address2"/>
                                </td>
                                <td>
                                    <s:property...

CSS

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

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

JavaScript

/* Formatting function for row details - modify as you need */

function format(coa){
            // `coa` is the original data object for the row
           alert("hello in format method...."+coa.firstName);
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                     '<tr bgcolor="lightgray">'+
                        '<th>FIRSTNAME</th>'+
                        '<th>MIDDLENAME</th>'+
                        '<th>LASTNAME</th>'+
                        '<th>HOMEPHONE</th>'+
                        '<th>MOBILEPHONE</th>'+
                        '<th>EMAIL</th>'+
                        '<th>JOB</th>'+
                        '<th>POSITION</th>'+
                        '<th>LOCATION</th>'+
                        '<th>SALARY</th>'+
                        '<th>MANAGERNAME</th>'+
                        '<th>DEPARTMENT</th>'+
                   '</tr>'+
                
                  '<tr>'+
                    '<td>'+coa.firstName+'</td>'+
                    '<td>'+coa.middleName+'</td>'+
                    '<td>'+coa.lastName+'</td>'+
                    '<td>'+coa.homePhone+'</td>'+
                    '<td>'+coa.mobilePhone+'</td>'+
                    '<td>'+coa.email+'</td>'+
                    '<td>'+coa.job+'</td>'+
                    '<td>'+coa.position+'</td>'+
                    '<td>'+coa.location+'</td>'+
                    '<td>'+coa.salary+'</td>'+
                    '<td>'+coa.managerName+'</td>'+
                    '<td>'+coa.department+'</td>'+
                 '</tr>'+
              '</table>';
        }
 $(document).ready(function() {
	var table = $('#viewSummary').DataTable( {
  "columns": [{"className": 'details-control',"orderable":false,"data": null, 			   
             "defaultContent": ''}, 
   {"orderable":false, "aTargets": [ 1 ]},{"orderable":false, "aTargets": [ 2 ]},
   {"orderable":false, "aTargets": [ 3 ]},{"orderable":false, "aTargets": [ 4 ]},
  ...