如何將jQuery DataTables應用於MVC4中的AJAX呈現部分視圖？

Question

我有一個局部視圖：

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

我不相信：

@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渲染）中調用控制方法將需要解決這個問題，但在這裏，他們是以防萬一：

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的腳本，但腳本沒有在表格上生效。我查找了一個很好的示例，但是我無法找到關於如何將DataTable應用於AJAX呈現的局部視圖的任何內容。我正在使用jQuery 2.0.3，如果知道以某種方式幫助。

任何幫助，非常感謝！

Answer 1

你的腳本在一個document.ready中，但是因爲你的部分視圖在這個腳本不影響你的局部視圖之後被加載。我該如何解決這個問題是把我想在一個函數

function AttachScript(){ 
    //your script here 
} 

在部分運行，然後調用該函數已加載的局部視圖

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

希望這有助於之後的腳本。

編輯：

我後來瞭解到，您可以點擊事件附加到文件，並附上腳本的方式

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

這個它附加到文檔，這將觸發腳本即使它是在頁面加載後加載的部分。