Использование плагина jQuery DataTables в MVC3 с jQuery Ajax

Question

Я пытаюсь использовать плагин DataTables jQuery в MVC3, используя 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-вызова отправляется элемент get 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, добавляются или заменяются.Я проверил HTML, возвращаемый из вызова ajax, и он всегда возвращает одну строку данных, только <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
        });

Редактировать

Если возможно, может быть лучше изменить код, чтобы вы могли использовать встроенную функциональность ajax с датируемыми данными, передавая параметр sAjaxSource при создании таблицы данных. Для этого потребуется изменить код на стороне сервера, чтобы он возвращал данные 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

Извините за плохое форматирование, но просто добавьте это условие в ваш код. Это гарантирует, что ваша таблица уже существует, и вы просто переходите с одной страницы на другую, тогда ваши данные будут заменены, а не добавлены. Надеюсь, это поможет

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

Answer 3

попробуйте инициализировать вашу таблицу данных за пределами обратного вызова success, а затем просто вызовите функцию fnDraw(), чтобы перерисовать таблицу после того, как вы обновите html таблицы.

РЕДАКТИРОВАТЬ

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