jQuery DataTable重新加载后格式化丢失问题

Question

我有一个部分视图，当控制器首次加载时，会像下面显示的那样在jquery数据表中加载数据。但是一旦我运行事件并调用部分操作方法，数据仍然返回，但格式已经消失了：

返回部分视图的代码：

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>

- Baahubali

Answer 1

您正在使用服务器返回的结果替换HTML代码：

您正在使用服务器返回的结果替换HTML代码：

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

服务器发送的只是一个HTML table，不包含任何jQuery DataTables或其他插件的相关知识。在将数据放置到DOM中后，您需要重新初始化该插件：

$.ajax({
    type: "GET",
    url: "@Url.Action("ListAppointments", "Appointment")",
    data: data,
    success: function (result2) {
        $("#partialViewAppointments").html(result2);

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

- David

---

谢谢。看起来这个方法可行。我知道我在做什么，但不知道如何修复它。我尝试了datatable的例子，但没有在成功函数中应用，并且在结果返回之前就已经应用了。 - Baahubali

Answer 2

您正在替换容器内的整个DOM，而不是使用DataTable API来更新其数据存储库。

您有两个选择：

1-暴力解决方案，重新初始化DT：

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

选项2 - 学习 API 环绕 aaData（DataTable 内部数据存储）。您可以通过 row().data() api 进行每行迭代 https://datatables.net/reference/api/row().data()

或者 - 了解 Datatable 中的 aaData 存储 http://legacy.datatables.net/usage/server-side-- 请注意这是 legacy api 文档，但在某种程度上仍然相关

- Brandt Solovij