怎样才能jQuery的数据表应用到AJAX在MVC4呈现局部视图？ [英] How can jQuery DataTables be applied to AJAX rendered partial view in MVC4?
问题描述
我有一个局部视图：
@model List<ADE_ATRS.Models.DistrictsSummaryStatistic>
@{
bool isPrint = (bool)ViewData["isPrint"];
string printHeader = ViewData["printHeader"].ToString();
int totalCount = 0;
if (ViewData["totalCount"] != null)
{
totalCount = (int)ViewData["totalCount"];
}
}
@if (isPrint)
{
@Styles.Render("~/Print/css")
}
<div class="content">
@if (isPrint)
{
<div>
<h2>
@printHeader
</h2>
</div>
}
<div>
<table>
<thead>
<tr>
<th colspan="2">
Counts
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Total Count
</td>
<td style="width: 75px;">
@totalCount
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<th>
District
</th>
<th style="width: 50px;">
LEA
</th>
<th style="width: 75px;">
Teachers
</th>
<th style="width: 75px;">
Admins
</th>
<th style="width: 75px;">
Total
</th>
</tr>
</thead>
<tbody>
@foreach (var district in Model)
{
<tr>
<td>
@district.Name
</td>
<td>
@district.LEA
</td>
<td class="text-right">
@district.TeacherCount
</td>
<td class="text-right">
@district.AdminCount
</td>
<td class="text-right">
@district.TotalCount
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
...这是通过AJAX（脚本在_Layout.cshtml渲染）标准视图中调用：
...this is called via AJAX within a standard view (scripts are rendered in _Layout.cshtml):
@{
ViewBag.Title = "Statistics Reports Summaries";
}
<script type="text/javascript">
$(document).ready(function () {
$('.error').fadeIn(2000);
$(document).ajaxStart(function () {
$('#loading-districts-summary').toggle('slow');
});
$(document).ajaxComplete(function () {
});
$.ajax({
url: '/statistics/_DistrictCountsSummary',
async: true,
dataType: 'html',
success: function (data) {
$('#loading-districts-summary').toggle('slow');
$('#districts-data-export').toggle('slow');
$('#placeholder-districts-summary').html(data);
}
});
});
</script>
<div class="content">
<h2>
Statistics Reports Summaries</h2>
<fieldset>
<legend>Districts Summary</legend>
<div id="districts-data-export" class="export">
@Html.ActionLink("Export to PDF", "Districts_Summary_PDF", true, new { @target = "new" })
@Html.ActionLink("Export to CSV", "Districts_Summary_CSV")
<span class="right">
@Html.ActionLink("View More", "Districts")
</span>
</div>
<div id="placeholder-districts-summary">
<div id="loading-districts-summary" style="text-align: center; display: none;">
@Html.Partial("_Loading")
</div>
</div>
</fieldset>
</div>
我不认为将需要在控制器的方法来解决这个问题，但在这里，他们是以防万一：
I don't believe the Controller methods will be needed to solve this but here they are just in case:
public ActionResult Index()
{
return View();
}
public ActionResult _DistrictCountsSummary(bool? isPrint)
{
string printHeader = "Districts Summary Report for " + GenericHelpers.SchoolYearString;
ViewData.Add("printHeader", printHeader);
if (isPrint.HasValue && (bool)isPrint)
ViewData.Add("isPrint", true);
else
ViewData.Add("isPrint", false);
var districts = DistrictsSummaryStatistic.GetDistrictsSummary();
ViewData.Add("totalCount", DistrictsSummaryStatistic.GetTotalCount(districts));
return PartialView(districts);
}
我想实现jQuery的数据表在我的局部视图底部的表，但我还没有在我的尝试是成功的。我试图在这两个标准视图和局部视图渲染数据表剧本，但剧本还没有采取在桌子上的影响。我环顾四周，一个很好的例子，但我不能找到如何到AJAX渲染的局部视图应用数据表什么。我使用jQuery 2.0.3如果知道某种方式帮助。
I am trying to implement jQuery DataTables for the bottom table in my partial view, but I have not been successful in my attempts. I have tried rendering the DataTables' scripts in both the standard view and the partial view, but the scripts have not taken effect on the table. I've looked around for a good example but I cannot find anything on how to apply DataTables to an AJAX rendered partial view. I am using jQuery 2.0.3 if knowing somehow helps.
任何帮助是极大AP preciated！
Any help is greatly appreciated!
推荐答案
你的脚本是在一个的document.ready但因为你的局部视图之后的脚本不影响你的部分加载。我该如何解决这个问题是把我想在功能上的部分运行脚本
your scripts are in a document.ready but since your partial view is loaded after that the scripts don't affect your partial. How I solve this is to put the script that I want to run on a partial in a function
function AttachScript(){
//your script here
}
，然后调用该函数已加载的局部视图后
and then call that function after you have loaded the partial view
$('#placeholder-districts-summary').html(data);
AttachScript();
希望这有助于。
编辑：
因为我已经学会了，你可以点击事件附加到文档，并附加你的脚本这样
I have since learned that you can attach the click event to the document and attach your script that way
$(document).on('click', '.clsButton', function(){
//do something
});
与此它附加到文档，如果它是在被页面加载之后加载的部分，这将甚至触发脚本
with this the script it attached to the document and this will fire even if it is on a partial that is loaded after the page load.
这篇关于怎样才能jQuery的数据表应用到AJAX在MVC4呈现局部视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
