Как заполнить данные из ответа AJAX, когда Datatables уже инициализированы?

Question

У меня есть смесь Select2JS и Datatables, и вот код, связанный с проблемой:

$(function() {
    var form_id = $('#form_id'),
        form_results = $('#form_results');

    form_results.DataTable();

    $.ajax({
        type: 'POST',
        dataType: 'json',
        contentType: 'json',
        url: '/ajax/forms/get/',
        data: JSON.stringify({
            form_id: null,
            show_archived: !!$('#show_archived').is(':checked'),
            get_first: false,
            format: 'select2',
        }),
        cache: false,
        success: function(data) {
            form_id.removeAttr('disabled');
            form_id.select2({
                data: data,
                closeOnSelect: true,
                matcher,
                sorter,
            }).on('select2:select', function(e) {
                var selected_element = $(e.currentTarget);

                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'json',
                    url: '/ajax/manage_forms/getFormData/',
                    data: JSON.stringify({
                        form_id: selected_element.val(),
                        get_first: true,
                    }),
                    cache: false,
                    success: function(response) {
                        form_results.DataTable({
                            data: response.data,
                            retrieve: true,
                            stateSave: true,
                            responsive: true,
                            columnDefs: [
                                {
                                    className: 'select-checkbox',
                                    orderable: false,
                                    searchable: false,
                                    targets: 0,
                                },
                            ],
                            select: {
                                style: 'multiple',
                                selector: 'td:first-child',
                            },
                        });
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        console.error(xhr.responseText);
                    },
                });
            });
        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.error(xhr.responseText);
        },
    });
});

На стороне PHP есть функция, собирающая данные и отправляющая их обратно в браузер:

public function getFormData()
{
    $inputJSON  = file_get_contents('php://input');
    $outputJSON = json_decode($inputJSON, true);
    $arguments  = array(
        'Id'           => $outputJSON['form_id'],
        'FormName'     => null,
        'FormFileName' => null,
        'FormTypeId'   => 1
    );

    $form = $this->forms_model->get($arguments, $outputJSON['get_first'], self::$folders);

    $result[] = array(
        '',
        'DT_RowId' => $form->Id,
        $form->FormName,
        $form->FaxNumber,
        end(explode('/', $form->form_filepath))
    );

    return $this->output->set_content_type('application/json')->set_output(json_encode(array('data' => $result)));
}

Результат вышеприведенной функции выглядит следующим образом:

{
    "data" : [
        {
            "0" : "",
            "DT_RowId" : 3387,
            "1" : "form",
            "2" : "8772399284",
            "3" : "form1.pdf"
        }
    ]
}

По какой-то причине в таблице все время отображается «Нет данных в таблице», и я не могу найти гдеэто проблема, кто-нибудь может узнать, что не так в моем коде?

Я потратил последние два часа, пытаясь выяснить это, но не могу.

Обновления:

@ charlietfl: следующее не сработало вначале с жалобой на то, что k не определен, поэтому я немного изменил, однако это не сработало

response.data.map(function(k, o) {
    return Object.keys(k).map(function(k) { return o[k];});
});

@ Поддержка CFP: ваше решение не работает либо по какой-то причине таблица не обновляется данными.

В обоих случаях я не получаю никакой ошибки Javascript или ничего странного в консоли, это просто делаетне работает.

Answer 1

Вам необходимо добавить «столбцы» и определить их.

  ...stuff...
    columnDefs: [
         {
           className: 'select-checkbox',
           orderable: false,
          searchable: false,
             targets: 0,
         },
      ],
      columns: [
           {data: "0"},
           {data: "DT_RowId"},
           {data: "1"},
           {data: "2"},
           {data: "3"}
      ], ....etc...

Это сообщает таблице, какой столбец сопоставлять с входящими данными (поэтому вам понадобится таблица с 5 столбцами в HTML - или создайте ее с помощью JS {не уверен, что вы используете, но если вам нужна помощь ... }

Это должно помочь вам преодолеть немедленную проблему.

РЕДАКТИРОВАТЬ: JSFiddle - https://jsfiddle.net/CFPSupport/5utwh4v3/6/

EDIT2: я вижу проблему - вы инициализируете, а затем хотите добавить больше данных ... ОК .....

Вы должны получить данные в датируемом init, а не init + AJAX .... https://datatables.net/reference/option/ajax