Ajax добавление ячейки в таблицу из полученного json?

Question

[beta-it]

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

<table id="doc_step_table" class="table table-hover table-condensed table-bordered">
                                    <thead>
                                    <tr>
                                        <th width="16%" class="active">Document</th>
                                        <th width="11%" class="active">Number</th>
                                        <th width="11%" class="active">issued</th>
                                        <th width="12%" class="active">Expiry</th>
                                        <th width="12%" class="active">Country</th>
                                        <th width="17%" class="active">Upload(Front side)</th>
                                        <th width="17%" class="active">Upload(Revers side)</th>
                                        <th width="2%"  class="active"></th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <tr class="information_json_add">
                                        <td class="disabled"></td
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td><span class="btn btn-success plus pull-right" data-toggle="modal" data-target="#AE_DOCS">+</span></td>
                                    </tr>
                                    </tbody>
                                </table>

И есть код js для отправки и получения данных на сервер:

$('#doc_modal_form').on('submit', function (e) {
        e.preventDefault();
        var $that = $(this),
            formData = new FormData($that.get(0));
            formData.append('step_form', 'DOCS');

        $.ajax({
            url: $that.attr('action'),
            type: $that.attr('method'),
            contentType: false,
            processData: false,
            data: formData,
            dataType: 'json',
            success: function (data) {
                if (data['added'] == true){
                    var field = data;
                    console.log("TableID: " + field['TableID'] + " Document: "+ field['Document'] + " Number: "+ field['Number'] +" Issued: " + field['Issued'] +
                        " Expiry: " + field['Expiry'] + " CountryD: " + field['CountryD'] + " Scan: " + field['Scan'] + " ScanR: " + field['ScanR']);

                    $('table #doc_step_table .information_json_add').after(
                        '<tr>' +
                            '<td class="disabled">field[\'TableID\'] </td>' +
                            '<td>field[\'Document\'] </td>' +
                            '<td>field[\'Issued\'] </td>' +
                            '<td>field[\'Expiry\'] </td>' +
                            '<td>field[\'CountryD\'] </td>' +
                            '<td>field[\'Document\'] </td>' +
                            '<td>field[\'Scan\']</td>' +
                            '<td>field[\'ScanR\']</td>' +
                            '<td><span class="btn btn-danger edit pull-right">&ndash;</span></td>' +
                        '</tr>'
                    );
                    $('#AE_DOCS').modal('hide');
                } else {
                    $('#doc_modal_form #msg').fadeIn(100).delay(5000).html(data['error']);
                    $('#doc_modal_form #msg').fadeOut(100).html(data['error']);
                }
            }
        });

Данные на сервер приходят, добавляю их в БД, а вот обратно вывести не получается без перезагрузки, в консоль так же выводятся данные от сервера.

Answer 1

[beta-it]

Решение:

...
 $("#doc_step_table tr:last").before('<tr>' +
                        '<td>' +    data['Document'] + '</td>' +
                        '<td>' +    data['Number'] + '</td>' +
                        '<td>' +    data['Issued'] + '</td>' +
                        '<td>' +    data['Expiry']          + '</td>' +
                        '<td>' +    data['CountryD']        + '</td>' +
                        '<td>' +    data['Scan']            + '</td>' +
                        '<td>' +    data['ScanR']           + '</td>' +
                        '<td><span data-row="'+data['TableID']+'" class="btn btn-danger edit pull-right">e</span></td>' +
                        '</tr>');
...

Answer 2

[Максим Тимофеев]

Не понятно что конкретно не получается у Вас. Не работает success? Не возвращаются данные?
Я бы вообще для этого использовал pjax (https://habrahabr.ru/post/123972/)