使用ajax重新加载后jquery数据表格式消失

Posted 2023-05-07

【中文标题】使用ajax重新加载后jquery数据表格式消失

【英文标题】：jquery datatable formatting gone after reloading using ajax

【发布时间】：2016-12-21 17:13:21

【问题描述】：

我有一个局部视图，当第一次使用控制器加载时，将数据加载到 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); 
    );

局部视图所在的剃刀：

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

【参考方案1】：

您正在将 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
    
);

【讨论】：

谢谢。这似乎奏效了。我知道我正在这样做，但不知道如何解决这个问题。我尝试了数据表示例，但未在成功函数中尝试并在返回结果之前应用。

【参考方案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 - 了解有关 aaData（DataTable 内部数据存储）的 API。您可以通过row().data() api https://datatables.net/reference/api/row().data() 进行每行迭代@

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