使用ajax重新加载后,jquery数据表格式化了

发布时间：2020-12-16 02:45:55 所属栏目：百科来源：网络整理

导读：我有一个局部视图,当第一次加载控制器时,将数据加载到 jquery数据表中,如下所示.但是,一旦我运行事件并调用部分操作方法,仍会返回数据,但格式化已消失：返回partialView的代码： public PartialViewResult ListAppointments(string _userId){ var userId =

我有一个局部视图,当第一次加载控制器时,将数据加载到 jquery数据表中,如下所示.但是,一旦我运行事件并调用部分操作方法,仍会返回数据,但格式化已消失：

when full page loads

partialview return

返回partialView的代码：

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

jQuery调用：

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

Razor的局部视图是：

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

局部视图：

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

    </tr>
</thead>
<tfoot>
    <tr>
        <th>ID</th>
        <th>Instructor</th>
        <th>Lesson Date and Time</th>
        <th>Address (if different)</th>
        <th></th>

    </tr>
</tfoot>


<tbody>
    @if (Model != null)
    {
        foreach (var info in Model)
        {
            <tr>
                <td>@info.Id</td>
                <td>@info.AppointmentInstructorName</td>
                <td>@info.LessonDateTime</td>

                <td>@info.AppointmentLessonAddress</td>
                <td>@Html.ActionLink("Edit","Edit","Appointment",new { id = info.Id },null)</td>
            </tr>

        }
    }

</tbody>

</table>

解决方法

您正在使用服务器的结果替换HTML：

$("#partialViewAppointments").html(result2);

从服务器发送的内容只是一个HTML表,不了解jQuery DataTables或任何其他插件.将数据放入DOM后,您需要再次初始化该插件：

$.ajax({
    type: "GET",success: function (result2) {
        $("#partialViewAppointments").html(result2);

        $('#example').DataTable(); // <-- right here
        // Using whatever options were used the first time,of course
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!