使用 jQuery Ajax 在 MVC3 中使用 jQuery DataTables 插件

Question

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

我有一个名为“搜索”的视图，其中包含一个搜索表单...在表单下，我有以下 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");
        });
    },

    ...
});

Answer 2

尝试在成功回调之外初始化您的数据表，然后在更新表格的 html 后调用fnDraw() 函数来重绘表格。

编辑

var dataTable = $("#caseTable").dataTable({
            "bJQueryUI": true,
            "bRetrieve": true,
            "bServerSide": true,
            "sAjaxSource": //Url to hit to query your database and return table data
            "sPaginationType": "full_numbers",
            "asStripClasses": ["white-highlight"]
        });

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

$.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 () {
        dataTable.fnDraw();
    },
    complete: function () {
        $("#ajaxProgress").dialog('close');
        $("#searchResults").show();
    }
});

Answer 3

抱歉，格式不佳，但只需在您的代码中添加此条件即可。这将确保您的表已经存在，并且您只是从一页转到另一页，然后您的数据将被替换而不是附加。希望这会有所帮助

if(typeof datataTable !="undefined" && datatable != null)
{ 
    $.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");
    });
},


});} else{dataTable.fnClearTable(0);dataTable.fnDraw();}