Данные не обновляют информацию

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

Я использую плагин jQuery DataTables с динамической таблицей html, прежде всего, я рисую свою таблицу с помощью вызова ajax, для этого я использую что-то вроде этого:

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

 Draw funcion ajax success
     success: function (data) {
            var aRC = JSON.parse(data.d);
            var lines = "";
            for (var i = 0; i < aRC.length; i  ) {
                var id = aRC[i].Id;
                var num = id;
                var rev = aRC[i].Campo;
                lines  = '<tr id="P'   num   '" data-id="'   num   '">';
                lines  = '<td>'   num   '</td>';
                lines  = '<td id="P'   num   '-1">'   rev   '</td>';
                lines  = '<td class="text-center">';
                lines  = '   <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="'   num   '"></span>';
                lines  = '   <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="'   num   '"></span>';
                lines  = ' </td>';
                lines  = '</tr>';
            }
            $('#TableTBodyTag').html(lines);
            $('#TableId').dataTable({
                aLengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                "bDestroy": true,
                iDisplayLength: 10,
            });
        }
    });

Обновление функции ajax успешно

 success: function (data) {   correctamente
        bootbox.alert(data.d);
        window.Fam.reset();
        Draw(); //Above function
    }

Когда я выполняю свою функцию обновления, все в порядке, но моя таблица данных не обновляется, я не вижу изменений, пока не перезагружу страницу (F5). Я вызываю Draw function document ready и в моей функции обновления.

Я не могу изменить способ создания таблицы, так как я могу решить эту проблему?

1. Используете ли вы таймер для вызова функции ajax? А затем получает результат и просто хочет обновить datatable? Я полагаю, вы хотите datatables.net/reference/api/ajax.reload () или datatables.net/plug-ins/api/fnReloadAjax

2. Я использую функцию, я вызываю эту функцию в documente ready и после отправки моей функции updateFunction

Ответ №1:

Это то, что я делал, когда использовал DT, модифицированный для использования ваших переменных:

 success: function (data) {   correctamente
    bootbox.alert(data.d);
    window.Fam.reset();
    $('#TableId').dataTable().fnDestroy();
    $('#TableTBodyTag').html("");
    Draw(); //Above function
}

Удачи!

1. Аххахаха, теперь я понимаю. Поначалу совершенно непонятно. Да, я занимался этой проблемой раньше в течение нескольких часов… Я знаю, что ты чувствуешь! Мое предложение, которое я считаю наилучшим для вашего здравомыслия, является моим отредактированным ответом.

2. Ты спас мою жизнь, джаджаджа, большое тебе спасибо! Это работает нормально!

Ответ №2:

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

Этот подход обречен на провал множеством способов.

Вместо этого используйте опцию ajax для указания источника данных и используйте columns.render() для создания вашего HTML-кода при отображении datatable .

При внесении изменений обновите удаленный источник данных, а затем вызовите table.ajax.reload() перестроение таблицы.

 var dataTableOptions = {
    responsive: true,
    "ajax": {
        "type": 'POST',
        "url": "/tools/somePage.php",
        "data": function(d) {
            d.command = 'getObjectInfo';
        }
    },
    columns: [{
        "orderDataType": "dom-text",
        "type": 'string',
        "width": '20%',
        "render": function(data, type, row) {
            // build all your html for the column here

        }
    }, {
        "orderDataType": "dom-text",
        "type": 'string',
        "render": function(data, type, row) {}
    }, {
        "orderDataType": "dom-text",
        "type": 'string',
        "render": function(data, type, row) {}
    }, {
        "orderDataType": "dom-text",
        "type": 'string',
        "render": function(data, type, row) {}
    } ],
    "tabIndex": -1

}


var table = $('#tableId').DataTable(dataTableOptions); 


table.ajax.reload()