Redraw Datatable with json data with button click
<p>I want to redraw my datatable if I press the plus button. However I get the error message that the JSON is not well formed even though it is a valid JSON. I can even see the two objects from the JSON data with debugging. Can somebody help?</p>

<pre><code>&lt;table class="table display sticky-header" id="tabelle_benutzerHead" cellspacing="0" width="100%"&gt;
    &lt;thead &gt;
        &lt;tr&gt;
            &lt;th&gt;Uhrzeit&lt;/th&gt;
            &lt;th&gt;SpNr&lt;/th&gt;
            &lt;th&gt;Platz&lt;/th&gt;
            &lt;th&gt;Heimmannschaft&lt;/th&gt;
            &lt;th&gt;Gastmannschaft&lt;/th&gt;
            &lt;th&gt;Freispiele&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
            &lt;tr id="Row1"&gt;
                &lt;td&gt;08:00&lt;/td&gt;
                &lt;td&gt;134&lt;/td&gt;
                &lt;td&gt;Platz 1&lt;/td&gt;
                &lt;td&gt;Team 5&lt;/td&gt;
                &lt;td&gt;Team 3&lt;/td&gt;
                &lt;td&gt;&lt;button class="btn btn-default AddDaten" type="button"&gt;&lt;i class="glyphicon glyphicon-plus-sign"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr id="Row2"&gt;
                &lt;td&gt;09:00&lt;/td&gt;
                &lt;td&gt;76&lt;/td&gt;
                &lt;td&gt;Platz 3&lt;/td&gt;
                &lt;td&gt;Team 7&lt;/td&gt;
                &lt;td&gt;Team 1&lt;/td&gt;
                &lt;td&gt;&lt;button class="btn btn-default AddDaten" type="button"&gt;&lt;i class="glyphicon glyphicon-plus-sign"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr id="Row3"&gt;
                &lt;td&gt;17:30&lt;/td&gt;
                &lt;td&gt;45&lt;/td&gt;
                &lt;td&gt;Platz 11&lt;/td&gt;
                &lt;td&gt;Team 2&lt;/td&gt;
                &lt;td&gt;Team 9&lt;/td&gt;
                &lt;td&gt;&lt;button class="btn btn-default AddDaten" type="button"&gt;&lt;i class="glyphicon glyphicon-plus-sign"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;
            &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;



var oTable = $('#tabelle_benutzerHead').DataTable({
    responsive: true,
    "bAutoWidth": false,
    "bFilter": false,
    "info": false,
    "scrollCollapse": true,
    "paging": false,
    rowReorder: true
});

$('#tabelle_benutzerHead').delegate('button.AddDaten', 'click', function() {
        var row = $(this).closest('tr'); // get the parent row of the clicked button                    
        var rowId = $(row).attr('id'); // clicked RowId

        var response = $.ajax({
            type: "POST",
            url: "api.json",
            dataType: "json",
            data: { 
                'rowId': rowId
            }).done(function (result) {

            oTable.clear().draw();
            oTable.rows.add(result);
            oTable.draw();
         });    
    });
</code></pre>

<p>My JSON looks like this:</p>

<pre><code>{
   "data": [
       ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
       ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"]
   ]
}
</code></pre>