Datatables sScrollY issue

An Example illustrating sScrollY property issue in the datatables library

by niki4810

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<button id="btnLoadData">Load Data</button>
</hr>
<table id="resultTable"></table>

JavaScript

$(document).ready(function () {
    var cols = [{
        "aTargets": [0],
            "sTitle": "col 1",
            "mDataProp": "col1"
    }, {
        "aTargets": [1],
            "sTitle": "col 2",
            "mDataProp": "col2"
    }, {
        "aTargets": [2],
            "sTitle": "col 3",
            "mDataProp": "col3"
    }, {
        "aTargets": [3],
            "sTitle": "col 4",
            "mDataProp": "col4"
    }];
    
    var dataGrid = $("#resultTable").dataTable({
        "bAutoWidth": true,
            "bProcessing": false,
            "sScrollXInner": "1000px",
            "bFilter": false,
            "sScrollX": "100%",
            "sScrollY": "200px",
            "bScrollCollapse": true,
            "aoColumnDefs": cols
    });
    
    var getData = function(){
       var results = []; 
        for(var i =0 ; i< 10; i++){
            var rowObj = {
                "col1" : "abc" + i,
                "col2" : "def" +i,
                "col3" : "jkl" + i,
                "col4" : "mno" + i
            };
           results.push(rowObj); 
        }
        return results;
    };
    
    $("#btnLoadData ").click(function () {
        dataGrid.fnClearTable();
        dataGrid.fnAddData(getData());
    });


});