使用ajax在表的末尾加载数据

Question

我有一个显示公司的页面。我有很多公司，所以我想只显示前20个，并允许用户点击表格末尾的链接（“加载更多”）。点击此链接应该保留现有公司，并在表的末尾添加新加载的公司。

我怎样才能实现这一目标？我知道我必须使用ajax和部分视图，但我无法想象将实际公司保留在我的表中（在加载新公司时不要删除这些公司）。

也许有一个ajax选项告诉不要删除（targetID）内容但最后加载数据？

有一个例子可以给我一些具体的想法吗？

感谢。

---

已更新

这是我在新加载的行上遇到jQuery图标时遇到的问题。如何使用图标继续新加载的行（ajax get）？

这是我的javascript：

$(document).ready(function () {

    // Set icons on edit & delete buttons
    $(".editCompany").button({ icons: { primary: "ui-icon-pencil"} });
    $(".deleteCompany").button({ icons: { primary: "ui-icon-trash"} });

Answer 1

您需要将ajaxOptions插入模式设置为InsertAfter。

InsertionMode.InsertAfter而不是InsertionMode.Replace，并确保您正在定位表。

这样的事情：

@Ajax.ActionLink("Load More...", "Action", new AjaxOptions{ UpdateTargetId="myTable", InsertionMode = InsertionMode.InsertAfter })

您需要确保返回仅呈现<tr>元素的PartialView，以便它们正确插入行。

指向InsertionMode可能值枚举的链接： http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.insertionmode.aspx

要解决jQuery Icons，只需确保在AjaxOptions的OnComplete回调中应用相同的jQuery。

new AjaxOptions{ UpdateTargetId="myTable", InsertionMode = InsertionMode.InsertAfter, OnComplete = 'LoadIcons()' }