如何将jQuery DataTable应用于MVC4中的AJAX呈现局部视图？

我有一个部分观点：

@model List @{ 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") } 
 @if (isPrint) { 
 
 @printHeader 
 
 } 
 
 
 
 
 Counts 
 
 
 
 
 
 Total Count 
 
 @totalCount 
 
 
 
 
 
  @foreach (var district in Model) {  } 
 
 
 
 District 
 
 LEA 
 
 Teachers 
 
 Admins 
 
 Total 
 
 
 
 
 @district.Name 
 
 @district.LEA 
 
 @district.TeacherCount 
 
 @district.AdminCount 
 
 @district.TotalCount 
 
 
 
  

…这是在标准视图中通过AJAX调用的（脚本在_Layout.cshtml中呈现）：

 @{ ViewBag.Title = "Statistics Reports Summaries"; }  $(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); } }); });  
 
 Statistics Reports Summaries
 
 
Districts Summary
 
 @Html.ActionLink("Export to PDF", "Districts_Summary_PDF", true, new { @target = "new" }) @Html.ActionLink("Export to CSV", "Districts_Summary_CSV")  @Html.ActionLink("View More", "Districts")  
 
 
 @Html.Partial("_Loading") 
 
 
  

我不相信需要Controller方法来解决这个问题，但这里只是以下情况：

  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 DataTables，但我的尝试并没有成功。 我已尝试在标准视图和部分视图中呈现DataTables的脚本，但脚本未在表上生效。 我环顾四周寻找一个很好的例子，但我找不到任何关于如何将DataTables应用于AJAX渲染的局部视图的内容。 如果知道某种程度上有帮助，我正在使用jQuery 2.0.3。

任何帮助是极大的赞赏！

Answer 1

您的脚本位于document.ready中，但由于您的部分视图已加载，因此脚本不会影响您的部分。 我如何解决这个问题是将我想要运行的脚本放在函数中的部分脚本中

 function AttachScript(){ //your script here } 

然后在加载局部视图后调用该函数

 $('#placeholder-districts-summary').html(data); AttachScript(); 

希望这会有所帮助。

编辑：

我已经了解到你可以将click事件附加到文档并以这种方式附加脚本

  $(document).on('click', '.clsButton', function(){ //do something }); 

使用它附加到文档的脚本，即使它在页面加载后加载的部分上也会触发。