代码之家 › 专栏 › 技术社区 › ilija veselica

只更新(ajax)表的一部分而不影响整个表

partial html-table ajax jquery

ilija veselica · 技术社区 · 14 年前

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

"sortby" 它是 th table 标签。

我试过插入div,但没用。在两个表中分隔这两个单元格并不是一个好的解决方案,因为两个表中的单元格宽度都不在后面。还有别的解决办法吗?

4 回复 | 直到 7 年前

Ryley 14 年前

将需要更新的tr放入 tbody thead 标签。

您可以将trs添加/删除到 表格主体 使用标准jQuery。

我建议您查看一堆堆现有的jQuery插件来完成这项工作(edit:完成这类工作的插件—对动态数据进行排序)。不幸的是,它目前处于脱机状态,所以我无法提供链接!

trs=数据行,即:

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

我假设这就是AJAX请求将返回的类型。

VoteyDisciple 14 年前

div 在桌子里面。您的想法是发出一个AJAX请求,返回一些表行,并希望将这些行插入表中吗?如果是这样,这个怎么样:

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

换句话说,找到并删除不需要的行,然后插入需要的内容。

Tsvetomir Tsonev 14 年前

对于排序,您可以尝试直接洗牌行:

将行0移到行1下方:

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

在末尾插入新行如下所示:

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

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

如果一次要做的更改不止一点,那么应该考虑使用jQuery在DOM之外构建一个新表。然后一步到位地更换旧桌子。对DOM的修改越少越好。

Kim 14 年前

根据排序的工作方式,这个插件可能是另一种选择,因为它允许按列过滤表。
http://tomcoote.co.uk/code-bank/jquery-column-filters/