Search code examples
jqueryajaxhtml-tablepartial

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

<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?

Solution

  • 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.