Update Data In A Table With Jquery And Ajax

I am trying to update a table according to ajax respond. My update should be insert as the first row inside in my table. With my coding this is happening in my table

Solution 1:

$('#manage_user table > tbody:last').find('tr:first').before(data);

Try this. check my fiddle : http://jsfiddle.net/W4gYY/3/

If you declared thead then you can use tbody:first and working fine. You do not mention thead that is way html treated as default tbody

If your html look like below :

<div id="manage_user">
<table>
  <thead>  
  <tr>
    <th><input type='checkbox' class='selectAll' name='selectAll' value='' /> Name</th>
    <th>Address</th>
    <th>City</th>
    <th>Edit</th>
    <th>Delete</th>
  </tr>
  </thead>
  <tbody>
     <tr>
      <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;sdfsdfs</td>
      <td>dsfs</td>
      <td>dsfdsf</td>
      <td><span class='edit_ico'></span></td>
      <td><span class='delete_ico'></span></td>
     </tr>
     <tr>
      <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;aaaaaaa</td>
      <td>dfsdf</td>
      <td>dsfsf</td>
      <td><span class='edit_ico'></span></td>
      <td><span class='delete_ico'></span></td>
     </tr>
 </tbody>
</table>
</div>

then you can use

$('#manage_user table > tbody:first').find('tr:first').before(data);

otherwise without thead in html you have to do following code

$('#manage_user table > tbody:last').find('tr:first').before(data); 

Solution 2:

use html instead of append

success: function(data) {
        $('#manage_user table > tbody:first').html(data);
        //alert(data);
}

Solution 3:

It is because your appending the data, you should use .html(data) then it will be replaced by your new data

Solution 4:

here the solution for you

OLD :

$('#manage_user table > tbody:first').append(data);

NEW :

$('#manage_user table > tbody').prepend(data);

You need to use prepend at the place of append

Solution 5:

There is a jQuery method called after() and it can do the thing you want...

$('#manage_user table > tbody:first').append(data); 

can be changed to

$('#manage_user tr:first').after('<tr><td>first</td></tr>'); which inserts the result as first row of the table... Check the demo here