Collapse_Expand

by Fantasy Land

HTML

<table width="100%" class="display" id="viewInvSummary" cellspacing="0">     
                    <thead>
                         <tr bgcolor="lightgray">
                            <th></th>
                            <th>
                                <s:text name="fundAlias"/>
                            </th>
                            <th>
                                <s:text name="fundStatus"/>
                            </th>
                            <th>
                                <s:text name="pendingInvoices"/>
                            </th>
                            <th>
                                <s:text name="withheldInvoices"/>
                            </th>
                            <th>
                                <s:text name="availableBalance"/>
                            </th>
                            <th>
                                <s:text name="pendingVouchers"/>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <s:iterator value="msInvSummList" status="inv" var="invList">
                        <s:if test="#inv.even == true">
                            <tr bgcolor="lightgray" id='<s:property value="inv"/>' class="highlight">
                        </s:if>
                        <s:else>
                            <tr id='<s:property value="inv"/>' class="highlight">
                        </s:else>
                                <td></td>
                                <td>
                                    <s:property value="fundAlias"/>
                                </td>
                                <td >
                                    <s:property value="fundStatus"/>
                                </td>
                                <td >
                                    <s:property value="pendingInvoiceAmt"/>
                                </td>
                          ...

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 ( d ) {
    // `d` is the original data object for the row
 return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "../ajax/data/objects.txt",
        "columns": [{
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''

            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
   

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', 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
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );