Table has unexpected behavior when created dynamically with DataTables

Question

Can anyone please help me figure out what is going on here? Table #1 and Table #2 produce identical looking tables, except Table #2 is missing the sort arrows and missing the sort and search functionality. I would expect them to work identically. Any ideas on a fix?

I am trying to softcode a table I have. The table is being sorted and has search functionality via DataTables. The following code creates a table that looks and behaves exactly the way I want:

Table #1: (.html)

<div>
<table id="services-status-table" class="table table-striped table-hover">
<thead>
<tr class="info">
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</tr>
</thead>
    <tbody id="sortable-cells">
    <tr>
        <td>Element #1</td>
        <td>Element  #2</td>
        <td>Element  #3</td>
    </tr>
    <tr>
        <td>Element  #4</td>
        <td>Element  #5</td>
        <td>Element  #6</td>
    </tr>
    </tbody>
</table>
</div>
<script src="search-controller.js"></script>
<script>
    $.getScript("table-sort-controller.js", function () {
        sortTable("services-status-table")
    });
</script>

I need to populate this table via JSON from a URL while maintaining search and sort functionality. I replaced the preceding code with:

Table #2 (.html)

<div>
<table id="services-status-table" class="table table-striped table-hover "></table>
</div>
<script>
$.ajax({
    url: "http://myserver:8080/myurl/"
    }).then(function(data) {
    var table = "<thead>";
    table += "<tr class='info'>";
    table += "<th>First Column</th>";
    table += "<th>Second Column</th>";
    table += "<th>Third Column</th>";
    table += "</tr>";
    table += "</thead>";
    table += "<tbody id='sortable-cells'>";
    data = JSON.stringify(data);
    alert(data);
    var json = JSON.parse(data);
    for(var element in json){
        var firstElement = json[element].first;
        var secondElement = json[element].second;
        var thirdElement = json[element].third;
        table += "<tr>";
        table += "<td>" + firstElement + "</td>";
        table += "<td>" + secondElement + "</td>";
        table += "<td>" + thirdElement + "</td>";
        table += "</tr>";
    }
    table += "</tbody>";
    document.getElementById("services-status-table").innerHTML = table;
});
</script>
<script src="search-controller.js"></script>
<script>
    $.getScript("table-sort-controller.js", function () {
        sortTable("services-status-table")
    });
</script>

After making this change, the table looks identical to the hard coded version, but none of my search or sort functionality is there. It does not show the sort icons either. It appears that the bottom two scripts are never being run, but when inserting an alert in them, it triggers every time. Here is search-controller.js and table-sort-controller.js if its wanted, but I don't think the problem is here:

search-controller.js:

var $rows = $('#sortable-cells tr');
$('#search').keyup(function () {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function () {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

$("#search-bar").submit(function (event) {
    event.preventDefault();
});

table-sort-controller.js:

function sortTable(id) {
alert("sorting table");
    $(document).ready(function () {
        $("#" + id).DataTable(
            {
                searching: false,
                info: false,
                paging: false
            }
        );
    });
};

I have been trying to figure this out for a couple of days now (obviously I am newb at JS), and I am still stuck. I am able to get the error Uncaught TypeError: Cannot read property 'aDataSort' of undefined on line 4245 of data-tables.js (from DataTables), but there does not seem to be any assistance out there for this error. Although there are a lot of questions about this error, there are no solutions:

Don't bother viewing these links...they are just to show the lack of knowledge associated with this problem
(http://demoscripts.info/28454203/jquery-datatables-cannot-read-property-adatasort-of-undefined.html)
(http://datatables.net/forums/discussion/21965/error-uncaught-typeerror-cannot-read-property-adatasort-of-undefined)
(https://groups.google.com/forum/#!topic/web2py/2PsyOKAOztk)
(https://github.com/l-lin/angular-datatables/issues/122)

The only "solution" I found to the error is here, but it does not seem to be match my issue.

Any ideas on how to make the softcoded table have the same search and sort functionality as the hardcoded table?