成功ajax拉数据后，datatables再次初始化

Question

我正在使用datatables我遇到了自我要求，我想要一个实时表数据，我使用数据表满足这个要求，但我有一个问题，数据表不会在json拉数据后初始化（成功后）从服务器拉出json响应）。以下是我的json帖子请求的代码（参见下文）

$.post("/test", { id: "1" }, function(response){
        if(response.success){
            var bbr = $("#ua_table tbody");
            bbr.html("");
            $.each(response.persons, function(index, value){
                bbr.append('<tr><td>' + value.name + '</td><td>' + value.address + '</td><td>' + value.job + '</td><td>' + value.contact + '</td></tr>');
            });

        }
    }, 'json');

我甚至试图在表格中附加内容（在脚本片段中，你可以看到具有“加载”功能类的按钮）并且它确实成功附加（每次你点击有一个类的按钮） “加载”，你会看到已经添加到表的tbody中）但是分页的东西（比如显示3个条目中的1到3个以及分页导航，例如first，1，last）没有改变，所以这意味着表格是没有重新初始化，任何想法，线索，建议，帮助，建议？

PS：数据表工具也没有用（没有复制，csv，excel，打印按钮显示），你可以看到，我已经链接了datatabletools脚本和样式，任何想法？

$(document).ready(function(){
  $('#ua_table').DataTable({
        "pagingType": "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"
        }
    });
  
  $(".load").click(function(){
    $("#ua_table tbody").append('<tr><td>Sample name</td>><td>Sample address</td><td>Sample Job</td><td>Sample Contact</td></tr>');
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>


<table class="table" id="ua_table">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Job</th>
    <th>Contact</th>
  </thead>
  <tbody>
    <tr>
      <td>Sample name 1</td>
      <td>Sample address 1</td>
      <td>Sample job 1</td>
      <td>Sample contact 1</td>
    </tr>
    <tr>
      <td>Sample name 2</td>
      <td>Sample address 2</td>
      <td>Sample job 2</td>
      <td>Sample contact 2</td>
    </tr>
    <tr>
      <td>Sample name 3</td>
      <td>Sample address 3</td>
      <td>Sample job 3</td>
      <td>Sample contact 3</td>
    </tr>
  </tbody>
 </table>

<button class="load">Load ajax</button>

Answer 1

您应该使用row.add()添加行。

我之前关于TableTools的answered your question。 TableTools不起作用，因为它的JS文件需要在DataTables JS文件之后加载。此外，它在下面的示例中不起作用，可能是由于Flash安全限制。您需要将此示例放在服务器上才能使其正常工作。

我还添加了Bootstrap样式，无论如何你似乎想要这样做。

请参阅下面的示例以获取代码和演示。

$(document).ready(function(){
  $('#ua_table').DataTable({
        "pagingType": "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"
        }
    });
  
  $(".load").click(function(){
    $('#ua_table').DataTable().row.add(['Sample name', 'Sample address', 'Sample Job', 'Sample Contact']).draw();
  });  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<link href="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet"/>  

<script src="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js"></script>


<table class="table table-striped table-bordered" id="ua_table">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Job</th>
    <th>Contact</th>
  </thead>
  <tbody>
    <tr>
      <td>Sample name 1</td>
      <td>Sample address 1</td>
      <td>Sample job 1</td>
      <td>Sample contact 1</td>
    </tr>
    <tr>
      <td>Sample name 2</td>
      <td>Sample address 2</td>
      <td>Sample job 2</td>
      <td>Sample contact 2</td>
    </tr>
    <tr>
      <td>Sample name 3</td>
      <td>Sample address 3</td>
      <td>Sample job 3</td>
      <td>Sample contact 3</td>
    </tr>
  </tbody>
 </table>

<button class="load">Load ajax</button>