jquery datatable formatting gone after reloading using ajax
<p>I have a partial view which when first loads with the controller, loads the data in a jquery datatable as shown below. However once I run an event and call the partial action method, the data is still returned but the formatting is gone:
<a href="https://i.stack.imgur.com/Tn1BB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tn1BB.png" alt="when full page loads"></a>
<a href="https://i.stack.imgur.com/OSpJb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OSpJb.png" alt="partialview return"></a></p>

<p>Code to return partialView:</p>

<pre><code>public PartialViewResult ListAppointments(string _userId)
{
    var userId =  Convert.ToInt32(_userId);
    var o = (from s in db.tblAppointments.ToList()
             where s.UserId == userId
             select new AppointmentViewModel { AppointmentInstructorName = s.InstructorName, AppointmentLessonAddress = s.Address, LessonDateTime = s.LessonDate, UserId = s.UserId, Id = s.ID });

    return PartialView(o);
}
</code></pre>

<p>jQuery call:</p>

<pre><code>function success(result) {
    var Id = $('#UserId').val();
    var data = JSON.stringify({"_userId": Id});
    $.ajax({
        type: "GET",
        url: "@Url.Action("ListAppointments", "Appointment")",
        data: data,
        success: function (result2) { $("#partialViewAppointments").html(result2); }
    });
}
</code></pre>

<p>Razor where the partial view is:</p>

<pre><code>&lt;div class="panel-heading tabbable" tabindex="0"&gt;&lt;h1&gt;List of all appointments (including historical) for user&lt;/h1&gt;&lt;/div&gt;
    &lt;div class="panel-body" id="partialViewAppointments"&gt;
        @Html.Partial("ListAppointments", Model.Appointments)
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Partial View:</p>

<pre><code> &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Instructor&lt;/th&gt;
        &lt;th&gt;Lesson Date and Time&lt;/th&gt;
        &lt;th&gt;Address (if different)&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;

    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tfoot&gt;
    &lt;tr&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Instructor&lt;/th&gt;
        &lt;th&gt;Lesson Date and Time&lt;/th&gt;
        &lt;th&gt;Address (if different)&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;

    &lt;/tr&gt;
&lt;/tfoot&gt;


&lt;tbody&gt;
    @if (Model != null)
    {
        foreach (var info in Model)
        {
            &lt;tr&gt;
                &lt;td&gt;@info.Id&lt;/td&gt;
                &lt;td&gt;@info.AppointmentInstructorName&lt;/td&gt;
                &lt;td&gt;@info.LessonDateTime&lt;/td&gt;

                &lt;td&gt;@info.AppointmentLessonAddress&lt;/td&gt;
                &lt;td&gt;@Html.ActionLink("Edit", "Edit", "Appointment", new { id = info.Id }, null)&lt;/td&gt;
            &lt;/tr&gt;

        }
    }

&lt;/tbody&gt;

&lt;/table&gt;
</code></pre>