jQuery Datatables responsive example

by Alexandre Froger

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="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
               ...

CSS

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

JavaScript

$(document).ready(function() {
var timer = null;
resize = function(){
    	var height = $( document ).height() - 	($(".dataTables_wrapper").height() - $(".dataTables_scrollBody").height());
      
      if(height < 50){
      	height = 50;
      }

    	$(".dataTables_scrollBody").height(height);
      var tbody = $(".dataTables_scrollBody tbody");
      var trItems = $(".dataTables_scrollBody tbody tr");
      var nbItems = $('select[name="example_length"]').val();
      if(tbody.height() < $(".dataTables_scrollBody").height()){
      	var newHeight = $(".dataTables_scrollBody").height() / nbItems;
        console.log(newHeight);
        trItems.height(newHeight+0);
      }
    }
	getHeight = function(){
    	var height = $( document ).height() - 	($(".dataTables_wrapper").height() - $(".dataTables_scrollBody").height());
      if(height < 50){
      	height = 50;
      }
      
      return height;
    };
    var table = $('#example')
    .on( 'init.dt', function ( e, settings )  {
    	 console.log("init");
    	settings.oScroll.sY = getHeight();
			resize();
		} )
    .on( 'page.dt', function ( e, settings )  {
    console.log("page");
    	if (timer !== null) clearTimeout(timer);
      timer = setTimeout(function () {
        resize();
      }, 2);
    })
    .on( 'length.dt', function ( e, settings )  {
    	console.log("length");
			resize();
		} )
    .on( 'search.dt', function ( e, settings )  {
    	    console.log("search");
          console.log(settings.oScroll);
			 if (timer !== null) clearTimeout(timer);
      timer = setTimeout(function () {
        resize();
      }, 2);
		} )
    .on( 'order.dt', function (e, settings) {
resize();
} ).DataTable( {
    		scrollY:        '50px',
        scrollCollapse: true,
        responsive: true,
        paging: true
    } );

    $(window).resize(function () {
    	    if (timer !== null) clearTimeout(timer);
      timer = setTimeout(function () {
        resize();
      }, 200);
    });
} );