Details Scroll

Example of datatables details view scrolling.

HTML

<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<body>
    <div data-role="page" data-theme='a'>
        <div data-role="content" data-position="fixed" id="divContent">
            <div id="divIndexWrapper">
                <div id="divGridWrapper">
                    <table id="tblAllCows" class="display compact" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Done</th>
                                <th>Name/ID</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="cordova.js"></script>
</body>

CSS

#divIndexWrapper {
    height: 100%;
    width: 100%;
    display: table;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}

#divGridWrapper {
    display: table-row;
    height: 100%;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}
#tblAddEdit {
    margin-top: -14px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}
td.details-control {
    background: url('../img/details_open.png') no-repeat center center;
    cursor: pointer;
    padding:2px 12px !important;
}
tr.details td.details-control {
    background: url('../img/DetailsClose.png') no-repeat center center;
}
.datatable-scroll {
    width: 100%;
    height: 200px !important;
    overflow-y: auto !important;
}

JavaScript

var data = [
    ["", "True", "Bessie"],
    ["", "True", "Daisy"],
    ["", "True", "Annabelle"],
    ["", "True", "Clover"],
    ["", "False", "Ellie"],
    ["", "True", "Gale"],
    ["", "True", "Ida"],
    ["", "True", "Holly"],
    ["", "False", "Jane"],
    ["", "True", "Fanny"],
    ["", "True", "Lily"]
];
var traits = ["ID", "Sire", "MGSire", "MGGSire", "UpDate", "BR",
    "New-ID", "Status", "Lact", "ST", "AN", "BD", "SR", "RA", "RLS", "FA", "FUA", "TL", "TP", "RW", "RUW", "RUH", "UD",
    "US", "RTP", "RLR", "PICT", "MO", "DISP", "Misc", "Mate1", "Mate2", "Mate3"];

function format(d) {
    var formatStr = [];
    formatStr.push("<div class = 'datatable-scroll'><table cellspacing='0' width='90%' style = 'float: right;'> <tbody>");
    for (var i = 0; i < traits.length; i++) {
        var trait = traits[i];
        formatStr.push("<tr><td width='40%'>" + trait + "</td><td>No value</td></tr>");
    }
    formatStr.push("</tbody></table></div>");
    return formatStr.join("");
}

var dt = $('#tblAllCows').DataTable({
    "autoWidth": true,
        "lengthChange": false,
        "stateSave": true,
        "stateDuration": 60 * 60 * 24,
        "pagingType": "simple",
        "sScrollY": ($(window).height() - 283),
        "scrollCollapse": false,
        "dom": '<fr<t>p>',
        "pageLength": 100,
        "data": data,
        "columns": [{
        "class": "details-control",
            "orderable": false,
            "data": null,
            "defaultContent": ""
    }, {
        "title": "Done"
    }, {
        "title": "Name/ID"
    }]
});

var detailRow = -1;

$("#tblAllCows").on('click', 'tr td:first-child', function () {
    var tr = $(this).closest('tr');
    var row = dt.row(tr);
    if (row.child.isShown()) {
        tr.removeClass('details');
        row.child.hide();
        detailRow = -1;
    } else {
        if (detailRow !== -1) {
            detailRow.child.hide();
        };
        tr.addClass("details");
       ...