Datatable не переинициализируется должным образом при перезагрузке для отображения новой сохраненной записи

Question

У меня есть дата, где он заполняется данными из базы данных.Когда веб-страница загружается, я вызываю функцию Bind (), и эта функция заполняет данные данными, а также инициализирует их.

У меня также есть модальное всплывающее окно, где пользователи могут добавлять записи.Когда они нажимают кнопку «Сохранить», она сохраняет запись, и я пытаюсь заново заполнить и повторно инициализировать таблицу данных.

Проблема заключается в том, что при повторной инициализации таблицы данных во второй раз (при нажатии кнопки),datatable не переинициализируется должным образом.Он отображает заголовки после каждой записи (см. Рисунок ниже).Обратите внимание, что это происходит только при нажатии кнопки.

Это мой код:

$(document).ready(function () {
    var dataTable;
    Bind();

    function Bind() {
        $.ajax({
            type: "POST",
            url: "Clubs.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }

function OnSuccess(response) {
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    var customers = xml.find("Table");
    var row = $("[id*=gvCustomers] tr:last-child").clone(true);
    $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
    $.each(customers, function () {
        var customer = $(this);
        $("td", row).eq(0).html($(this).find("ClubID").text());
        $("td", row).eq(1).html($(this).find("ClubName").text());
        $("td", row).eq(2).html($(this).find("ClubEmail").text());
        $("td", row).eq(3).html("<span>" + $(this).find("ClubID").text() + "</span>");
        $("td", row).eq(4).html("<img id='btnID' src='/assets/img/edit.png' Style='width: 20px; height: 18px;'</>");
        $("[id*=gvCustomers]").append(row);
        row = $("[id*=gvCustomers] tr:last-child").clone(true);
    });
    //This is where I initializes my datatable
    $('table').each(function () {
        dataTable = $(this).prepend($("<thead style=background-color:#ff974d></thead>").append($(this).find("tr:eq(0)"))).DataTable({
            "responsive": true,
            "searching": true,
            "aaSorting": [],
            "sPaginationType": "full_numbers",
            dom: 'lBfrtip',
            buttons: [
                {
                    extend: 'copy',
                    className: 'btn btn-success'
                },
                {
                    extend: 'excel',
                    text: 'Excel',
                    title: 'Centre Information',
                    className: 'btn btn-success',
                    orientation: 'portrait',
                    exportOptions: {
                        columns: [0, 1, 2]
                    }
                },
                {
                    extend: 'pdf',
                    text: 'PDF',
                    title: 'Centre Information',
                    className: 'btn btn-success',
                    orientation: 'portrait',
                    exportOptions: {
                        columns: [0, 1, 2]
                    }
                },
                {
                    extend: 'print',
                    text: 'PRINT',
                    title: 'Centre Information',
                    className: 'btn btn-success',
                    orientation: 'portrait',
                    exportOptions: {
                        columns: [0, 1, 2]
                    }
                }
            ]
        });
    });
}
    });

Тогда это код в кнопке сохранения, где я пытаюсь повторно инициализировать объект данных * 1010.*

$("#btnSave").click(function () {
    dataTable.destroy();
    Bind();
    return false;
});

Пожалуйста, помогите, как я могу правильно инициализировать данные.

Answer 1

Попробуйте сохранить DataTable в переменной и уничтожьте ее перед повторным связыванием данных.

Итак, сначала создайте переменную, к которой можно получить доступ в обеих функциях.

var dataTable;

function Bind() {
    //rest of code
}

Затем назначьте правильныйтаблица с переменной

dataTable = $(this).prepend($("<thead style=background-color:#ff974d></thead>").append($(this).find("tr:eq(0)"))).DataTable({

И затем по этой кнопке нажмите уничтожить, что

$("#btnSave").click(function () {
    dataTable.destroy();
    Bind();
    return false;
});