Почему Datatable .destroy и .clear терпят неудачу при загрузке представлений через ajax? - PullRequest
Новая
       15

Почему Datatable .destroy и .clear терпят неудачу при загрузке представлений через ajax?

0 голосов
/ 04 июля 2019

У меня есть функция поиска, которая использует jquery ajax для загрузки нескольких div с представлениями (каждый из них сериализует связанную с ними модель в качестве источника данных для таблиц данных и загружает эти таблицы данных). Когда функция поиска срабатывает, она очищает эти источники данных, очищает и уничтожает таблицы данных, очищает элементы div, а затем перезагружает эти элементы div с представлениями через ajax с их таблицами данных. На втором и последующих вызовах ajax, несмотря на то, что он очищен, уничтожен и т. Д., Я все еще получаю сообщение об ошибке «Не удается повторно инициализировать данные», при каждом из них и при третьем поиске не будет только 4 таких сообщений ( по одному на дату), но 8 из этих сообщений.

Но данные перезагружаются правильно.

Функция поиска в основном представлении js, вызовы ajax, попытки уничтожить и очистить. Каждое представление сериализует свою модель, а JS устанавливает таблицы данных. Я думаю, что js перезагружается при каждом вызове ajax и, возможно, удваивается? 

$('#IdNumberSearchDiv').on('change', function ()
{
    ClearDivs();  // sets each's .html('');
    if (typeof virtualAddressDataTable !== 'undefined')
    {
        if (virtualAddressDataTable != null)
        {
            virtualAddressSerializedObject = null;

            console.log("virtualAddressDataTable - isDefined and is not Null -- destroying");
            virtualAddressDataTable.clear();
            virtualAddressDataTable.destroy();
            virtualAddressDataTable = null;
            $('#virtualAddressTable').DataTable().clear().draw();

            //$virtualAddressDataTable.dataTable().fnDestroy(); 
        }
    }
    AjaxLoadViews();
});

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

var virtualAddressSerializedObject;
var virtualAddressDataTable;
var virtualAddressArray = [];
var virtualAddressId = null;

// Builds the array as the datasource for the jquery datatable
function BuildVirtualAddressServerModel(serverModel)
{
    $.each(serverModel, function (key, value)
    {
        virtualAddressArray.push(serverModel[key]);
    });
}

// Binds the datatable to the datasource array
// Specifies the columns and definitions for the jquery datatable
function LoadVirtualAddressDataTable()
{
    virtualAddressDataTable = $('#virtualAddressTable').DataTable({
        data: virtualAddressArray,
        columns: [
            { data: 'crudAction', 'visible': false},
            { data: 'ID', 'visible': false},
            { data: 'FkEntityPersonId', 'visible': false },
            { data: 'VirtualAddres' },
            { data: null }
        ],
        columnDefs: [
            {
                orderable: false,
                targets: 4,
                defaultContent: '<div class="floatRightClass" >' +
                    '<a class="btn btn-xs glyphicon glyphicon-pencil btn-edit-virtualAddress" title="Edit VirtualAddress"> </a>' +
                    '<a class="btn btn-xs glyphicon glyphicon-trash btn-delete-virtualAddress" title="Delete VirtualAddress"> </a>' +
                    '</div>'
            }
        ],
        autoWidth: false,
        order: [[1, 'asc']]
    });

    // Show rows which have crudAction='L', 'U' or 'I' , not 'D'
    virtualAddressDataTable.columns(0).every(function ()
    {
        var that = this;
        var colm = virtualAddressDataTable.column(0);
        var data = colm.data();

        $.each(data, function (key, value)
        {
            if (value == "D")
            {
                //var tableRow = entityPersonAddressDataTable.row($(this).parents('tr'));
                virtualAddressDataTable.row(that).remove().draw(false);
            }
        });
    });
}


$(document).ready(function ()
{
    // Get the Serialized Model into a local js variable/object
    virtualAddressSerializedObject = @Html.Raw(virtualAddressSeriallizedObject);


    // Builds the array as the datasource for the jquery datatable
    BuildVirtualAddressServerModel(virtualAddressSerializedObject);


    // Load the jquery VirtualAddressDataTable
    LoadVirtualAddressDataTable();

   //...Edit Delete Add functions here

});
...