Update (ajax) only part of table without affecting whole table

Question

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list">
              <tr>
                <th><a href="#" class="sortby">Full Name</a></th>
                <th><a href="#" class="sortby">City</a></th>
                <th><a href="#" class="sortby">Country</a></th>
                <th><a href="#" class="sortby">Status</a></th>
                <th><a href="#" class="sortby">Education</a></th>
                <th><a href="#" class="sortby">Tasks</a></th>
              </tr>
    <div class="dynamicData">
              <tr>
                <td>Firstname Lastname</a></td>
                <td>Los Angeles</td>
                <td>USA</td>
                <td>Married</td>
                <td>High School</td>
                <td>4</td>
              </tr>
              </tr>
              <tr>
                <td>Firstname Lastname</a></td>
                <td>Los Angeles</td>
                <td>USA</td>
                <td>Married</td>
                <td>High School</td>
                <td>4</td>
           </tr>
    </div> 
</table>

The idea is to update table rows when clicking on link with clasl "sortby" which is part of th table tag. I tried inserting div but this doesn't work. Separating this in two tables is not good solution because witdh in both tables cell are not following each other. Any other solution?

Thanks

Answer 1

Indeed, you cannot have divs inside a table. Is the idea that you make an AJAX request, which returns some table rows, and you want to insert those rows into your table? If so, how about this:

$.get('...', function(data) {
    $('.list tr:not(:has(.sortby))').remove().after(data);
});

In other words, find and remove the rows you don't want, and then insert the stuff you do want.

Answer 2

Put the trs that need updating in a tbody tag and put your header in a thead tag.

You can add/remove trs to the tbody using standard jQuery.

I suggest you look in to the piles and piles of existing jQuery plugins that do this (edit: that do this type of thing - sorting of dynamic data). Unfortunately it's offline at the moment, so I can't provide a link!

EDIT:

trs = rows of data, i.e.:

        <tr>
            <td>Firstname Lastname</td>
            <td>Los Angeles</td>
            <td>USA</td>
            <td>Married</td>
            <td>High School</td>
            <td>4</td>
       </tr>

I assumed that is the type of thing your AJAX request will be returning.

Answer 3

For sorting you might try shuffling the rows directly:

Move row 0 below row 1:

$("table.list tr").eq(0).insertAfter($("table.list tr").eq(1))

Inserting a new row at the end would look like this:

$("<tr>Content</tr>").insertAfter($("table.list tr:last"))

Removing a row:

$("table.list tr").eq(1).remove()

If you're doing more than a few changes at a time you should consider building a new table outside of the DOM using jQuery. Then replace the old table in one move. The fewer modifications to the DOM the better.