DataTables

DataTables My

by Jorge Beteta

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.0/css/fixedColumns.dataTables.min.css">
<script src="https://nightly.datatables.net/fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<title>
  Scrolling and fixed</title>




<body>
  <div style="background:white">

    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
      <thead>
        <tr>
          <th>fixed column</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>we got some text to show here with spaces and more</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td>4</td>
          <td>X</td>
        </tr>
        <tr>
          <td>we got some text to show here</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet...

JavaScript

$(function() {
		  $('#example').DataTable({		    
        "fnInitComplete": function () {
                    // Disable scrolling in Head
                    $('.dataTables_scrollHead').css({
                        'overflow-y': 'hidden !important'
                    });

                    // Disable TBODY scroll bars
                    $('.dataTables_scrollBody').css({
                        'overflow-y': 'scroll',
                        'overflow-x': 'hidden',
                        'border': 'none'
                    });

                    // Enable TFOOT scoll bars
                    $('.dataTables_scrollFoot').css('overflow', 'auto');

                    //  Sync TFOOT scrolling with TBODY
                    $('.dataTables_scrollFoot').on('scroll', function () {
                        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                    });
                    
                },
		    scrollX: true,
		    paging: true,
		    fixedColumns: {
		      leftColumns: 1
		    }
		  });
		});