Table details
by Kevin La
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css">
<link rel="stylesheet" href="//datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.js"></script>
<script src="//datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<table id="myTable" class="display dt-responsive" cellspacing="0" border="1">
<thead>
<tr>
<th></th>
<th>Asset Name</th>
<th>Type</th>
<th>Purpose</th>
<th>Current State</th>
<th>Future State</th>
<th>Source</th>
</tr>
</thead>
<tbody id="fbody">
<tr class="entry">
<td></td>
<td>Ullamcorper Purus</td>
<td>Purus</td>
<td>Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna.</td>
<td>Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod.</td>
<td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</td>
<td>url string</td>
</tr>
<!-- END TABLE BODY -->
</tbody>
</table>
JavaScript
$('#myTable').DataTable( {
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ],
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "/images/uploads/pages/documents/copy_csv_xls_pdf.swf",
"aButtons": [ "copy", "csv", "print", "pdf" ]
}
});