Nested DataTables

Nesting jQuery DataTables Plugin within itself

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css "></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<table id="exampleTable">
    <thead> 
        <tr>
            <th>Year</th>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JavaScript

the_data = [[1, 2, 3], [4, 5, 6]];
the_new_data = [[4, 4, 4],[5,5,5],[6,6,6],[7,7,7]];
the_new_data1 = [[4, 4, 4],[5,5,5],[6,6,6],[7,7,7]];

the_json_data = ({
    data: JSON.stringify(the_new_data),
    delay: 5000
});
//alert(the_json_data);

    $(document).ready(function () {
        var oTable = $('#exampleTable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "iDelayLoading": 4,
            "aaData": the_data,
            "sAjaxSource": '/echo/jsonp/',
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    dataType: "json",
                    type: "GET",
                    url: "/echo/jsonp/",
                    data: the_json_data,
                    success: function (result) {
                        alert('returned!: ' + JSON.stringify(result) + ' ' + result.data);
                        fnCallback(result.data);
                    }
                });
            },
            
            "aoColumns": [
                { "mData": "Year", "sTitle":"Year" /*, "aTargets": [0]*/ },
                { "mData": "Month", "sTitle":"Month"},
                { "mData": "Savings", "sTitle":"Savings"  },
        ]
            //"aaSorting": [[1, 'asc']]
        });

    });