javascript - 如何使用 jquery ajax 重新加载数据表

Question

这是我的 table

    <table class="table table-hover display search dataTable" id="test" cellspacing="0" >
  <thead>
    <tr>
      <th> ID </th>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody >
    <% all_employees.each do |employee|%>
      <tr>
        <td> <%= check_box_tag 'employee_ids[]', employee.id %> </td>
        <td> <%= employee.name %> </td>
        <td> <%= employee.age %> </td>
        <td> <%= employee.email %> </td>
      </tr>
    <% end %>
  </tbody>
</table>  

和我的js

function filtered_employee(group_id){
    $.ajax({
      url: "/employee_groups/"+group_id+"/associated_employees",
      type: "get",      
      data: {
        "id" : group_id
      },
      success: function(result) { 
        $('#test').html(result)
      },
      error: function(result){
        $('#test').html(result.responseText)
      }
    });
}

我在 Rails 4 版本中使用 Ruby on Rails 在按钮上单击我调用此 ajax req，我得到了预期的响应，但是当在 ajax 中触发成功时，我得到一张新表格，覆盖在旧表格上，如何解决此问题？

提前致谢

Answer 1

我建议把你的<table>在其他一些容器中，并在 ajax 成功时刷新该容器，如下所示:

<div class="tableWrapper">
    <table class="table table-hover display search dataTable" id="test" cellspacing="0" >
    ....
    </table>
</div>

和 JS 代码:

function filtered_employee(group_id){
    $.ajax({
      url: "/employee_groups/"+group_id+"/associated_employees",
      type: "get",      
      data: {
        "id" : group_id
      },
      success: function(result) { 
        $('.tableWrapper').html(result)
      },
      error: function(result){
        $('.tableWrapper').html(result.responseText)
      }
    });
}