jQuery Datatables responsive example

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>
<table id="datatable" class="display" cellspacing="0" width="100%">    
 </table>

CSS

table th:nth-child(3), td:nth-child(3) {
  display: none;
}

JavaScript

$(document).ready(function() {

    var file = 'http://www.mapleleaflegacy.ca/v1/api/casualty/read.php';
    
    $('#datatable')
    .on('xhr.dt', function (e, settings, json, xhr) {
    
        //Clean the Data
        if (json != null) {
            var data = json;
            //do stuff here
        }

        json = data;

    })
    .dataTable({
        'deferRender': true,
        'iDisplayLength': 10,
        'bSort': true,
        'dom': 'Bfrtip',
        'order': [[2, 'desc']],
        'buttons': [
                    'excel'
        ],
        'ajax': {
            'url': file,
            'dataType': 'json',
            'dataSrc': "records",
            'destroy': "True",
        },
        'aoColumns':
            [
                { "data": "ID", "sTitle": "ID", "visible": false },
                { "data": "fldfirstnameinitial", "sTitle": "Surname"},
                { "data": "fldsurname", "sTitle": "Given Name" },
                { "data": "flddeceased", "sTitle": "Date of Death"},
                { "data": "fldrank", "sTitle": "Rank" },
                { "data": "fldservice", "sTitle": "Service"},
                { "data": "fldunit", "sTitle": "Unit" },
                { "data": "fldsvcnumber", "sTitle": "Service No." },
                { "data": "fldcountry", "sTitle": "Commemorated in Country" },
                { "data": "fldcemetery", "sTitle": "Commemorated in Cemetery/Memorial"},
                { "data": "fldotherdetails", "visible": false }
        ]
    });
} );