当我们点击数据表中的列名并显示“表格中没有数据”时，数据会消失

Question

我正在尝试在数据表中填充表数据

示例代码：

HTML：

<table id="idOfmyTable">
        <thead>
        <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
</table>

使用的Jquery库：

jquery.dataTables.min.css
jquery-3.1.0.min.js
jquery.dataTables.min.js

使用Javascript：

function getAllRecords(rootPath) {
    $.getJSON(rootPath , function(response) {
        $("#idOfmyTable").find('tbody').empty(); // Added to remove "No data available in table" message in first row after loading data
        $.each(response, function(idx, obj) {

            var body = "<tr>";
            body    += "<td>" + obj.column1 + "</td>";
            body    += "<td>" + obj.column2 + "</td>";
            body    += "<td>" + obj.column3 + "</td>";
            body    += "<td>" + obj.column4 + "</td>";
            body    += "</tr>";
            $( "#idOfmyTable tbody" ).append(body);
        });

        $('#idOfmyTable').DataTable();
    });
}

数据填充在数据表中，包含以下问题：

1. '0个条目中显示0到0'显示即使有数据存在 数据表。
2. 当我点击任何列头（用于排序）时，数据将消失并且“表格中没有数据”消息将为
   显示。

请帮助我，我在这里做错了什么？

注意：我跟着here，但没有运气。