DataTables Sorting Testing

by tward

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js"></script>


<table id="ValuesTable" style="position: relative; width: 1798px; right: 0px;" class="dataTable"><colgroup><col data-dt-column="0" style="width: 289.562px;"><col data-dt-column="1" style="width: 301.266px;"><col data-dt-column="2" style="width: 331.844px;"><col data-dt-column="3" style="width: 283.688px;"><col data-dt-column="4" style="width: 306.188px;"><col data-dt-column="5" style="width: 285.453px;"></colgroup><thead>
                                <tr><th style="text-align: left;" data-dt-column="0" rowspan="1" colspan="1" class="dt-orderable-asc dt-orderable-desc"><div class="dt-scroll-sizing"><div class="dt-column-header"><span class="dt-column-title">Description</span><span class="dt-column-order" role="button" aria-label="Missions Area: Activate to sort" tabindex="0"></span></div></div></th><th style="text-align: center;" data-dt-column="1" rowspan="1" colspan="1" class="dt-type-numeric dt-orderable-asc dt-orderable-desc"><div class="dt-scroll-sizing"><div class="dt-column-header"><span class="dt-column-title">Total</span><span class="dt-column-order" role="button" aria-label="Total: Activate to sort" tabindex="0"></span></div></div></th><th style="text-align: center; margin-left:50px;" data-dt-column="2" rowspan="1" colspan="1" class="dt-type-numeric dt-orderable-asc dt-orderable-desc"><div class="dt-scroll-sizing"><div class="dt-column-header"><span class="dt-column-title">Current Year</span><span class="dt-column-order" role="button" aria-label="Current Year: Activate to sort" tabindex="0"></span></div></div></th><th style="text-align: center;" data-dt-column="3" rowspan="1" colspan="1" class="dt-type-numeric dt-orderable-asc dt-orderable-desc"><div class="dt-scroll-sizing"><div class="dt-column-header"><span class="dt-column-title">Year Two</span><span...

CSS

@import url("https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.min.css");

JavaScript

$(document).ready(function() {
    $('#ValuesTable').DataTable({
        'searching': false,
        'paging': false,
        'scrollY': 'max-content',
        'scrollCollapse': true,
        'info': false,
        'ordering': true,
        'order': [2, 'asc'],
        'columnDefs': [{ targets: [1, 2, 3, 4, 5], type: 'num' }]
    });
});