dynatable - failing to render values from JSON to HTML dynatable cells

Question

I have an sql view that I am retrieving via a REST web api with URL /api/sqlViews/fJwGBICTqbz/data.json

Snippet of JSON object

{"title":"Status Report","headers":[{"name":"dataelementid","column":"dataelementid","type":"java.lang.String","hidden":false,"meta":false},{"name":"dataelementname","column":"dataelementname","type":"java.lang.String","hidden":false,"meta":false},{"name":"orgunitname","column":"orgunitname","type":"java.lang.String","hidden":false,"meta":false},{"name":"orgunitparentid","column":"orgunitparentid","type":"java.lang.String","hidden":false,"meta":false},{"name":"parentorgunit","column":"parentorgunit","type":"java.lang.String","hidden":false,"meta":false},{"name":"orgunitstructurelevel","column":"orgunitstructurelevel","type":"java.lang.String","hidden":false,"meta":false},{"name":"periodid","column":"periodid","type":"java.lang.String","hidden":false,"meta":false},{"name":"periodstartdate","column":"periodstartdate","type":"java.lang.String","hidden":false,"meta":false},{"name":"periodname","column":"periodname","type":"java.lang.String","hidden":false,"meta":false},{"name":"sourceid","column":"sourceid","type":"java.lang.String","hidden":false,"meta":false},{"name":"categoryoptioncomboid","column":"categoryoptioncomboid","type":"java.lang.String","hidden":false,"meta":false},{"name":"attributeoptioncomboid","column":"attributeoptioncomboid","type":"java.lang.String","hidden":false,"meta":false},{"name":"captureddatavalue","column":"captureddatavalue","type":"java.lang.String","hidden":false,"meta":false},{"name":"storedby","column":"storedby","type":"java.lang.String","hidden":false,"meta":false},{"name":"lastupdated","column":"lastupdated","type":"java.lang.String","hidden":false,"meta":false},{"name":"comment","column":"comment","type":"java.lang.String","hidden":false,"meta":false},{"name":"followup","column":"followup","type":"java.lang.String","hidden":false,"meta":false},{"name":"created","column":"created","type":"java.lang.String","hidden":false,"meta":false}],"height":134551,"rows":[["33601","PC Le village a un Macon_Agg ?","Kinshasa Province","33110","Kinshasa","3","50390","2014-08-01","Monthly","68","15","15","28","admin","2014-12-15 15:06:18.843","","","2014-12-15 15:06:18.843"],["33604","PC En especes_Agg","Kinshasa Province","33110","Kinshasa","3","50390","2014-08-01","Monthly","68","15","15","28","admin","2014-12-15 15:06:14.544","","","2014-12-15 15:06:14.548"],["32964","PC Trou a ordure _Agg","Kinshasa Province","33110","Kinshasa","3","50390","2014-08-01","Monthly","68","15","15","28","admin","2014-12-15 15:06:13.124","","","2014-12-15 15:06:13.128"]

Snippet HTML Code

<table id="statusreporttable">
            <!-- Or add <tr> instead of <thead> -->
            <thead>

                    <th data-dynatable-column="dataelementid">dataelementid</th>
                    <th data-dynatable-column="dataelementname">dataelementname</th>
                    <th data-dynatable-column="orgunitname">orgunitname</th>
                    <th  data-dynatable-column="orgunitparentid">orgunitparentid</th>
                    <th data-dynatable-column="parentorgunit">parentorgunit</th>
                    <th  data-dynatable-column="orgunitstructurelevel">orgunitstructurelevel</th>
                    <th data-dynatable-column="periodid">periodid</th>
                    <th data-dynatable-column="periodstartdate">periodstartdate</th>
                    <th data-dynatable-column="periodname">periodname</th>
                    <th data-dynatable-column="sourceid">sourceid</th>
                    <th data-dynatable-column="categoryoptioncomboid">categoryoptioncomboid</th>
                    <th data-dynatable-column="attributeoptioncomboid">attributeoptioncomboid</th>
                    <th data-dynatable-column="captureddatavalue">captureddatavalue<th>
                    <th data-dynatable-column="storedby">storedby</th>
                    <th data-dynatable-column="lastupdated">lastupdated</th>
                    <th data-dynatable-column="comment">comment</th>
                    <th data-dynatable-column="followup">followup</th>
                    <th data-dynatable-column="created">created</th>

        <thead><tbody></tbody>

Snippet JQuery and Ajax Code

$.ajax({

        url : base + "api/sqlViews/fJwGBICTqbz/data.json",
        cache:false,
        contentType : 'application/json; charset=utf-8',
        success : function(data) {

            console.log(data);

            $('#statusreporttable').dynatable({
                dataset:{
                    records:data.rows
                }

            });


        },

        error : function(xhr, status, errorThrown) {
            alert("Sorry, there was a problem retrieving table results!");
            console.log("Error:" + errorThrown);
            console.log("Status:" + status);
        }

    });

Google Chrome Console output - No errors but below is the JSON data object

Object
headers: Array[18]
height: 134551
rows: Array[134551]
[0 … 9999]
[0 … 99]
0: Array[18]
0: "33601"
1: "PC Le village a un Macon_Agg ?"
2: "Kinshasa Province"
3: "33110"
4: "Kinshasa"
5: "3"
6: "50390"
7: "2014-08-01"
8: "Monthly"
9: "68"
10: "15"
11: "15"
12: "28"
13: "admin"
14: "2014-12-15 15:06:18.843"
15: ""
16: ""
17: "2014-12-15 15:06:18.843"
length: 18

Rendered Results into HTML Table (HTML Output)

undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined

Problem

1. Rendered table has an empty/erased table header
2. [MAJOR-PROBLEM] - My table picks up the correct number of rows from the JSON Array object but all my table cell values are written "undefined".The actual values as in my JSON object are not coming out.

Kindly assist. Thanks in advance