My jQuery Datatables Report Fiddle

Report

by Eric Pias

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<link rel="stylesheet" href="cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.min.css">
<script src="cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
                <th>City</th>
                <th>State</th>
                <th>Zip</th>
                <th>Total</th>
                <th>Item</th>
                <th>Related Items</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
 
 
        <tbody>
            <tr>
                <td>Eric</td>
                <td>Pias</td>
                <td>92 Silver Spring Drive</td>
                <td>Higganum</td>
                <td>CT</td>
                <td>06441</td>
                <td>$80.00</td>
                <td>Item 1</td>
                <td>Item 10|Item 11|Item 12</td>
                <td>$10</td>
                <td>4</td>
                <td>$40</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
        ...

JavaScript

$(document).ready(function() {
    $('#example').DataTable( {
        responsive: true,
        "columnDefs": [
            {
                // lets make col 0 be a link
                "render": function ( data, type, row ) {
        return '<a href="http://www.frevvo.com" target="_new">' + data +'</a>';
                },
                "targets": 0
            },
            {
                // lets make col 8 be a list
                "render": function ( data, type, row ) {
        return '<ol><li>item 10</li><li>item 11</li></ol>';
                },
                "targets": 8
            }        
        ],
        dom: 'T<"clear">lfrtip',
        tableTools: {
            "aButtons": [ "copy", "print" ],
            "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls.swf"
        }
    } );
} );