Datatables.js test

by cesutherland

HTML

<script src="https://datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/media/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/Scroller/css/dataTables.scroller.css">
<script src="https://datatables.net/release-datatables/extensions/Scroller/js/dataTables.scroller.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
</table>

JavaScript

$(document).ready(function() {
    var data = [];
    for ( var i=0 ; i<1000 ; i++ ) {
        data.push( [ i, i, i, i, i ] );
    }
         
    $('#example').DataTable( {
        data:           data,
        deferRender:    true,
        //dom:            "frtiS",
        dom: 'T<"clear">lfrtiS',
        scrollY:        200,
        scrollCollapse: true,
        tableTools: {
            "sRowSelect": "os",
            "aButtons": [ "select_all", "select_none" ]
        }
    });
/*
    $('#example').DataTable( {
        dom: 'T<"clear">lfrtip',
        tableTools: {
            "sRowSelect": "multi",
            "aButtons": [ "select_all", "select_none" ]
        }
    } );*/
} );