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

Posted 2023-05-07

【中文标题】成功ajax拉数据后数据表再次初始化

【英文标题】：datatables initialize again after success ajax pull data

【发布时间】：2015-09-25 18:40:38

【问题描述】：

我正在使用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 中进行追加（在脚本 sn-ps 中，您可以看到具有“加载”功能类的按钮）并且它确实成功追加了（每次您点击具有一类“负载”，您会看到已添加到表格的 tbody 中）但分页内容（例如显示 3 个条目中的 1 到 3 个和分页导航，例如 first、1、last）没有改变，因此这意味着表没有再次初始化，有什么想法、线索、建议、帮助、建议吗？

PS：datatabletools 也不起作用（没有显示复制、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>

【问题讨论】：

查看这个帖子***.com/questions/12934144/…

【参考方案1】：

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

我 answered your question 之前提到过 TableTools。 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>

【讨论】：

我运行您的代码 sn-p 但导出到 excel、csv、pdf 不起作用，只能打印。有什么想法吗？

@CodeDemon，TableTools 在<iframe> 内的 SO 上不起作用。将此示例放在您的服务器上以使其正常工作。

你好，如何先清空 tbody 内容，然后添加 json 数据（“tr and td stuffs”），然后对其进行初始化？

@CodeDemon，您可以使用clear() 删除所有行。但是，听起来您可以使用 ajax.url 选项为 DataTable 设置 URL，然后在应该从服务器重新加载数据时使用 ajax.reload()。

那会很酷，但是如果我在每个 tr 或选定的 tr 上都有类和数据绑定呢？如何将数据绑定和类放入 tr 或 td？