Javascript 为什么我的dataTables功能元素不工作？

我正在使用datatables对我的表进行分页。表中的数据来自我的服务器端。 数据如表所示，但表中显示消息“表中无可用数据”

另外，当我尝试datatable的搜索功能和长度更改功能时，数据会突然消失

这是我的html表格：

        <table class="table table-striped" id="executives">
            <thead>
                <th>Employee Number</th>
                <th>Name</th>
                <th>Department</th>
                <th>Position</th>
                <th>Action</th>
            </thead>
            <tbody style="color:black;"id="empTable">               
            </tbody>
        </table>

员工编号
名称
部门
位置
行动

这是我的数据表：

        <script>
            $(document).ready(function () {
                $('#executives').DataTable({
                "paging": "full",
                "bLengthChange": true,
                "bFilter": true,
                "lengthMenu": [5, 10, 25, 50, 75, 100, "All"],
                "dom": '<"my-wrapper"<"inner-wrapper"<"my-inner0"f><"my-inner1"l><"my-inner1"p>><t><"outer-wrapper"<"my-inner2"i><"my-inner1"p>>">'
            });
        });
        </script> 

$（文档）.ready（函数（）{
$（“#高管”）。数据表({
“分页”：“已满”，
“bLengthChange”：正确，
“bFilter”：没错，
“长度菜单”：[5,10,25,50,75,100，“全部”]，
“dom”：“当您使用
$（'#empTable'）.append（empData）；
时，您正在将数据添加到浏览器中显示的HTML表中，您可以在其中看到它。但是您的
DataTable
对象不知道有关此数据的任何信息。这就是DataTables显示“无数据”的原因。”消息，以及当您要求DataTables执行任何操作时HTML表中的数据消失的原因：DataTables重新显示其数据-这根本不是数据。有多种方法可以解决此问题。例如，不要生成HTML字符串，而是使用的DataTables内置支持直接向DataTables提供数据。@andrewjames除了使用内置的ajax支持，还有其他方法吗？@andrewjames我尝试使用内置的ajax，但是，它只在tableLoading消息中显示加载：这通常意味着出现了一个错误，这会在浏览器的控制台中报告（通常，您可以使用F12打开控制台）。如果您共享该错误以及从服务器发送的JSON数据，我们可以尝试进行故障排除。当您使用
$（'#empTable'）。append（empData）；
，您正在将数据添加到HTML表中—您可以在浏览器中看到它。但是您的
DataTable
对象对该数据一无所知。这就是DataTables显示“无数据”的原因消息，以及当您要求DataTables执行任何操作时HTML表中的数据消失的原因：DataTables重新显示其数据-这根本不是数据。有多种方法可以解决此问题。例如，不要生成HTML字符串，而是使用的DataTables内置支持直接向DataTables提供数据。@andrewjames除了使用内置的ajax支持，还有其他方法吗？@andrewjames我尝试使用内置的ajax，但是，它只在tableLoading消息中显示加载：这通常意味着出现了一个错误，这会在浏览器的控制台中报告（通常，您可以使用F12打开控制台）。如果您共享该错误以及从服务器发送的JSON数据，我们可以尝试进行故障排除。
$(document).ready(function(){
  $.getJSON("URL",function(data){
    var empData = [];
    $.each(data, function(key, value){
      empData.push ("<tr>");
      empData.push ("<td id=''"+ key +"''>" + value.empId + "</td>");
      empData.push ("<td id=''"+ key +"''>" + value.firstName + "</td>");
      empData.push ("<td id=''"+ key +"''>" + value.work.department + "</td>");
      empData.push ("<td id=''"+ key +"''>" + value.work.position + "</td>");
      empData.push ("<td id=''"+ key +"''>" + value.work.position + "</td>");
      empData.push ("</tr>")
      
    }); 
      $('#empTable').append(empData);
    console.log(empData);
  });
});