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 width in both tables cell are not following each other. Any other solution?

score 2 · Answer 1 · answered Jun 02 '10 at 19:30

2

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.

answered Jun 02 '10 at 19:30

VoteyDisciple

37,319
5
97
97

"Is the idea that you make an AJAX request, which returns some table rows, and you want to insert those rows into your table?" - That's correct. What is .list referring to? – ilija veselica Jun 02 '10 at 19:32
I thought IE was not cool with adding/removing TRs directly from tables? – Ryley Jun 02 '10 at 19:35
.list is just the table itself, as shown in the markup. I've never had any trouble with IE adding or removing table rows. – VoteyDisciple Jun 02 '10 at 19:42
See also: http://stackoverflow.com/questions/812693/cant-dynamically-add-rows-to-a-table-in-ie – Ryley Jun 02 '10 at 20:00

Ryley · Accepted Answer · 2010-06-02T19:38:11.200

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.

Ok, I'll give it a try, this sounds pretty simple. Thanks – ilija veselica Jun 02 '10 at 19:37 — ilija veselica, Jun 02 '10 at 19:37

score 1 · Answer 3 · answered Jun 02 '10 at 19:54

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.

score 0 · Answer 4 · answered Nov 04 '10 at 20:39

You can append new rows of data and remove unwanted rows with regular jQuery.

Depending on how your sorting works, then this plugin might be an alternative as it allows filtering a table by column.
http://tomcoote.co.uk/code-bank/jquery-column-filters/

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

4 Answers4