jQuery Datatables responsive example

by Scott Melcher

HTML

<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<script type='text/javascript' src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.min.js"></script>
<table border="1" class="dataTable cell-border compact hover stripe" id="myid">
  <thead>
    <tr>
      <th class="sortable-text " id="col1">Col1</th>
      <th class="sortable-text " id="col2">Col2</th>
      <th class="sortable-text " id="col3">Column 3333</th>
      <th class="sortable-numeric " id="col6">QQQ</th>
      <th class="sortable-numeric">All123456</th>
      <th class="sortable-numeric">Testt6 Testt</th>
      <th class="sortable-numeric">Past 123 123456</th>
      <th class="sortable-numeric">12345678 Sunday</th>
      <th class="sortable-numeric">12345678 vs SS Sunday</th>
      <th class="sortable-numeric">$ 123456</th>
      <th class="sortable-numeric">$ vs SS Sunday</th>
      <th class="sortable-numeric">12345678 1/10/2016</th>
      <th class="sortable-numeric">12345678 vs SS 1/10/2016</th>
      <th class="sortable-numeric">$ 1/10/2016</th>
      <th class="sortable-numeric">$ vs SS 1/10/2016</th>
      <th class="sortable-numeric">12345678 1/17/2016</th>
      <th class="sortable-numeric">12345678 vs SS 1/17/2016</th>
      <th class="sortable-numeric">$ 1/17/2016</th>
      <th class="sortable-numeric">$ vs SS 1/17/2016</th>
      <th class="sortable-numeric">12345678 1/24/2016</th>
      <th class="sortable-numeric">12345678 vs SS 1/24/2016</th>
      <th class="sortable-numeric">$ 1/24/2016</th>
      <th class="sortable-numeric">$ vs SS 1/24/2016</th>
      <th class="sortable-numeric">12345678 1/31/2016</th>
      <th class="sortable-numeric">12345678 vs SS 1/31/2016</th>
      <th class="sortable-numeric">$ 1/31/2016</th>
      <th class="sortable-numeric">$ vs SS 1/31/2016</th>
      <th class="sortable-numeric">12345678 2/7/2016</th>
      <th class="sortable-numeric">12345678 vs SS 2/7/2016</th>
      <th...

JavaScript

$(document).ready(function() {
  $('#myid').DataTable({
    'dom': 't',
    'paging': false,
    'scrollCollapse': true,
    'scrollX': true,
    'orderClasses': false,
    'bSort': true,
    'autoWidth': false,
    'scrollY': '200',
    'aaSorting': [],
    fixedColumns: {
      leftColumns: 3
    }
  });
});