使用ajax将数据加载到我的表的末尾
问题描述:
我有一个页面,用于显示公司。我有很多公司,所以我只想显示前20个,并允许用户点击表格末尾的链接(“加载更多”)。点击此链接应保留现有公司并在末尾添加新装公司。使用ajax将数据加载到我的表的末尾
我该如何做到这一点?我知道我必须使用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"} });
答
您需要设置ajaxOptions插入模式InsertAfter。
InsertionMode.InsertAfter而不是InsertionMode.Replace,并确保您的目标是表。
事情是这样的:
@Ajax.ActionLink("Load More...", "Action", new AjaxOptions{ UpdateTargetId="myTable", InsertionMode = InsertionMode.InsertAfter })
你需要确保你正在返回PartialView只呈现<tr>
元素,使他们正确地插入的行。
链接到可能值的枚举InsertionMode: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.insertionmode.aspx
对于jQuery的图标来解决你只需要确保你在AjaxOptions的回调的onComplete应用相同的jQuery。
new AjaxOptions{ UpdateTargetId="myTable", InsertionMode = InsertionMode.InsertAfter, OnComplete = 'LoadIcons()' }
谢谢班福德,我马上试试 – Bronzato 2012-04-11 11:34:33
我试了一下,行加载成功。只是没有问题(超出范围)我注意到我的jQuery图标没有显示在新加载的行上。这是因为这些图标(通常)定义在$(document).ready(function()...任何想法如何在新加载的行上显示这些图标?我更新了我的问题以显示视图的屏幕截图。无论如何, – Bronzato 2012-04-11 12:06:04
从您的文档加载JavaScript中将它们解压缩为一个JavaScript函数,然后您可以从AjaxOptions中的OnComplete属性中调用它。http://msdn.microsoft.com/zh-cn/library/system.web .mvc.ajax.ajaxoptions.aspx – Banford 2012-04-11 12:18:32