Datatables обратный вызов ajax не заполняет таблицу - PullRequest
Новая
       6

Datatables обратный вызов ajax не заполняет таблицу

0 голосов
/ 14 декабря 2018

Я редко, если когда-либо делаю javascript, так что я вполне уверен, что это либо неверная конфигурация, либо я что-то упустил.

Я использую Datatables v1.10.7.У меня есть таблица, которая имеет все необходимые парс, thead, tfoot и tbody.В этом порядке.

Я использую серверную обработку для получения некоторых данных и заполнения таблицы.

В связи с тем, что я хочу добавить некоторые другие вещи, не относящиеся к датируемым, но связанные сданные, которые он получает, я хотел иметь функцию обратного вызова. 

$('#target-list-li').DataTable({
    processing: true,
    serverSide: true,
    pageLength: 100,
    ajax: {
        url: ajax_url,
        success: function(data) {
            // Do other stuff here
            return data;
        }
    },

    columns: [
        {
            data: 'trans_source_id',
            render: function (data, type, row) {
                var html = '';

                html += '<input type="checkbox" id="check-' + row.trans_source_id + '" ';

            },
            orderable: false
        },

        // more columns would go here but I've removed them since it's irrelevant to the question
});

«Проблема» или, скорее, неправильное понимание этого работает, вероятно, с этим битом кода success: function(data).

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

success: function(data) {
    // Some some stuff here
    return data;
}

Однако это не работает вообще.Даже если я просто верну данные, таблица не заполнится.На самом деле, он просто зависает при вызове ajax.Он завершается, но ничего не заполняется.

enter image description here

Рекомендуемая опция перехода к ajax, по-видимому, dataSrc. В документации сказано так: 

dataSrc: function(data) {
    return data;
}

Это «работает», таблица заполняется без данных, по крайней мере, это улучшение по сравнению с success.

Вот так выглядит моя таблица с атрибутом dataSrc.

enter image description here

В этом отношении документация в лучшем случае расплывчатая илиПо крайней мере, я не могу найти что-то подходящее для моей проблемы.

Я ожидал, что произойдет следующее: сделайте вызов ajax, используйте данные для некоторого обратного вызова, не изменяя оригинал в любом случае.Делай мои вещи, возвращай оригинальные данные и все.

Очевидно, что это не тот случай.

Если кто-нибудь может указать мне правильное направление здесь, я буду признателен.

1 Ответ

0 голосов
/ 15 декабря 2018

Я работал с проектом, используя плагин Datatables , и общий подход к нему был следующим:

1) Сначала получите данные, создающие ajax post длясервер.

2) После ответа сервера с помощью data используйте обратный вызов success, чтобы обработать данные, как вам нужно, и, наконец, создать и отобразить table.

Для примера кода, который вы используете, подход будет выглядеть примерно так: 

// First, make an ajax post to get data from the server.

$.ajax({
    type: "POST", /* You could use GET if the server support it */
    dataType: "json" /* Use the adequate type for your case */,
    url: ajax_url,
    success: function(data)
    {
        // Log the data to check the structure.
        console.log(data);

        // Pre-process data here...

        // Create and render the datatable.
        // We assume, "data.data" holds the source data for the table.
        createDatatable(data.data);
    },
    error: function()
    {
        alert('Failed to get data from server');
    }
});

// Method for create and render the datatable.

function createDatatable(srcData)
{    
    $('#target-list-li').DataTable({
        pageLength: 100,
        data: srcData,
        columns: [
            {
                data: 'trans_source_id',
                render: function (data, type, row)
                {
                    var html = '';
                    var sId = row.trans_source_id;
                    html += '<input type="checkbox" id="check-' + sId + '" ';
                },
                orderable: false
            },
            // More columns would go here but I've removed them since
            // it's irrelevant to the question.
        ],
    });
}
...