jquery - jQuery DataTables 如何应用于 MVC4 中的 AJAX 渲染部分 View ？

Question

我有一个片面的看法:

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

...这是通过标准 View 中的 AJAX 调用的(脚本在 _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>

我不认为需要 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);
    }

我正在尝试在部分 View 中为底部表格实现 jQuery DataTables，但我的尝试并未成功。我尝试在标准 View 和部分 View 中渲染DataTables的脚本，但脚本尚未在表上生效。我四处寻找一个很好的例子，但我找不到任何关于如何将 DataTables 应用于 AJAX 渲染的部分 View 的信息。如果知道有帮助的话，我正在使用 jQuery 2.0.3。

非常感谢任何帮助!

Answer 1

您的脚本位于 document.ready 中，但由于您的部分 View 是在之后加载的，因此脚本不会影响您的部分 View 。我解决这个问题的方法是将我想要在函数的一部分上运行的脚本

function AttachScript(){
    //your script here
}

然后在加载部分 View 后调用该函数

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

希望这有帮助。

编辑:

此后我了解到您可以将点击事件附加到文档并以这种方式附加脚本

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

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