how to reload the datatable using jquery ajax

Question

here is my 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>

and my 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)
      }
    });
}

Am using Ruby on rails with rails 4 version on a button click am calling this ajax req am getting the response as expected but when the success is triggered in ajax i get a new table painted over the old one how to resolve this issue?

Thanks in advance

vijayP · Accepted Answer · 2015-10-21 10:31:39Z

2

I will suggest to put your <table> within some other container and refresh that container on ajax success as follows:

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

And JS code:

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)
      }
    });
}

answered Oct 21, 2015 at 10:31

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rathishkumar Over a year ago

i tried in this way too it paints the entire page over the old page(on successful ajax call) in my query it paints only the table

vijayP Over a year ago

which view you are returning from /associated_employees? In browser's developer console or firebug can you check what is coming back? I mean is it returning entire page with <html><head><body> tag or simply response with <table> tag?

Rathishkumar Over a year ago

entire page <html> to </html> the view: same view show.html where am rendering this table as a partial

vijayP Over a year ago

So does that correct behavior? I believe /associated_employees should only return view with <table class="table table-hover display search dataTable" id="test" cellspacing="0"> as starting tag and </table> as ending tag

Collectives™ on Stack Overflow

how to reload the datatable using jquery ajax

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related