How can jQuery DataTables be applied to AJAX rendered partial view in MVC4?

Question

I have a partial view:

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

...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);
    }

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.

Any help is greatly appreciated!

Matt Bodily · Accepted Answer · 2014-09-20 02:05:50Z

5

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();

Hopefully this helps.

Edit:

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.

edited Sep 20, 2014 at 2:05

answered Oct 25, 2013 at 14:45

Matt Bodily

6,4134 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can jQuery DataTables be applied to AJAX rendered partial view in MVC4?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related