javascript - $(document).ready() 使数据表无法正常工作

Question

我正在尝试将表启动为空， <tbody> 中没有数据并选择一些参数通过$.getJSON发送到服务器并将返回的json数据附加到 <tbody> 中.

但看起来是因为 $(document).ready()它使其无法正常工作，分页和搜索完全停止工作。

顺便说一句，我包含了所有需要的文件，我知道错误是因为我在页面加载后填充表格，我只是想知道是否有另一种方法来解决这个问题。

这是我的代码:

<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript">
   $(document).ready(function()
   {
       $('#contacts').dataTable({
           "sPaginationType" : "full_numbers"
       });
        
       $("#submit").click(function()
             {
           $.getJSON("/myurl",
           function(data) 
           {
               $("#table_body").empty();
               $.each(data, function(i, item) 
               {                                    
                   $("#table_body").show("slow");
                   $("#table_body")
                   .append(
                       '<tr class="gradeC">' +
                           '<td>' + item.name+ '</td>' +
                           '<td>' + item.birthdate + '</td>' +
                           '<td>' + item.age + '</td>' +
                       '</tr>'
                   );
               });
           });
       });
   });
</script>


<!-- NOW THE HTML CODE FOR THE TABLE -->


<table cellpadding="0" cellspacing="0" border="0" class="display" id="contacts">
   <thead>
      <tr>
         <th>Name</th>
         <th>Birthdate</th>
         <th>Age</th>
      </tr>
   </thead>
   <tbody id="table_body"></tbody>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Birthdate</th>
         <th>Age</th>
      </tr>
   </tfoot>
</table>

Answer 1

您似乎没有正确使用 Datatables API。通读the documentation并尝试使用数据表方法来添加行和清空表等。