asp.net-mvc - 在 MVC3 中使用 jQuery DataTables 插件和 jQuery Ajax

Question

我正在尝试使用 MVC3 中的 DataTables jQuery 插件，使用 ajax 请求作为表的数据源。

我有一个名为“搜索”的 View ，其中包含一个搜索表单...在该表单下，我有以下 html...

<table id="caseTable" class="clear full-width dataTable">    
    <thead>
        <tr>
            <th>Case Name</th>
            <th>Court</th>
            <th>Case Number</th>
            <th>Case Filed Date</th>
            <th>Chapter</th>
            <th>Last Researched</th>
            <th>Disposition</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

提交搜索表单后，将发送一个 ajax 调用，获取要在表中显示的每条记录的 tr 元素。

$.ajax({
    url: "/Home/SearchForCases",
    type: "POST",
    data: {
        CaseNumber: caseNumber,
        DebtorLastName: lastName,
        Last4SSN: last4SSN,
        FullSSN: fullSSN,
        StartDate: $("#StartDate").val(),
        EndDate: $("#EndDate").val(),
        SelectedCourtDistrictId: $("#SelectedCourtDistrictId").val(),
        SelectedChapterId: $("#SelectedChapterId").val()
    },
    success: function (result) {
        $("#caseTable > tbody").html(result);
        $("#caseTable").dataTable({
            "bDestroy": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "asStripClasses": ["white-highlight"],
            "bAutoWidth": false
        });
        $("#caseTable > tbody > tr").dblclick(function () {
            $(this).removeClass("white-highlight").addClass("yellow-highlight");
        });
    },
    complete: function () {
        $("#ajaxProgress").dialog('close');
        $("#searchResults").show();
    }
});

第一次调用时一切加载正常，但在后续调用中，从 ajax 调用返回的数据将被附加或替换。我已经检查了从ajax调用返回的html，它总是返回一行数据，<tr><td></td></tr>仅。

Answer 1

添加 bDestroy 选项以首先删除旧的数据表格式。您还可以尝试删除 bRetrieve 选项。

   success: function (result) {
        $("#caseTable > tbody").html(result);
        $("#caseTable").dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "asStripClasses": ["white-highlight"],

            "bDestroy": true
        });

编辑

如果可能，最好更改您的代码，以便您可以通过传入sAjaxSource来使用内置的数据表ajax功能。创建数据表时的选项。这需要您更改服务器端代码以返回 json 数据而不是 html。

如果不可能，那么您应该使用 fnClearTable在添加新数据之前清除现有数据。

var dataTable;

$.ajax({

    ...

    success: function (result) {
        // If it has been created, clear the existing data in the datatable
        if(dataTable != null) {
            dataTable.fnClearTable();
        }

        // Add your new data
        $("#caseTable > tbody").html(result);

        // Create / recreate the datatable
        dataTable = $("#caseTable").dataTable({
            "bDestroy": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "asStripClasses": ["white-highlight"],
            "bAutoWidth": false
        });

        $("#caseTable > tbody > tr").dblclick(function () {
            $(this).removeClass("white-highlight").addClass("yellow-highlight");
        });
    },

    ...
});