Как добавить новую строку в таблицы данных после успешной отправки формы с использованием AJAX

Question

Может ли кто-нибудь сказать мне, как добавить новую строку в текущую таблицу данных после успешного вызова AJAX. Это мой код

$(document).ready(()=>{
$.ajax({
    url: 'http://localhost:3000/api/post/getUserData',
    method: 'post',
    dataType: 'json',
    data: {
        "email": window.email,
        "token": window.token
    },
    success: function(data){
        let table = $('#datatable').dataTable({
        data: data,
        "autoWidth": true,
        columns: [
                {'data': 'id'},
                {'data': 'main'},
                {'data': 'shrinked'},
                {'data': 'clicks'},
                {"data": "id",
                    "render": function ( data, type, row, meta ) {
                        return `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`
                    }
                },
                {"data": "id",
                    "render": function ( data, type, row, meta ) {
                        return `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                    }
                }
            ]
        })
//function to add new Row inside Datatable
        $(function () {
            $('#form').bind('submit', function (event) {
                // using this page stop being refreshing
                event.preventDefault();

                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:3000/userShrink',
                    data: {
                        fullUrl: $('#Url').val(),
                        email: window.email,
                        token: window.token
                    },
                    success: function () {
                        $.ajax({
                            url: 'http://localhost:3000/api/post/getUserData',
                            method: 'post',
                            dataType: 'json',
                            data: {
                                "email": window.email,
                                "token": window.token
                            },
                            success: function(data){
                                table
                                    .row.add([
                                        data.id,
                                        data.main,
                                        data.shrinked,
                                        data.clicks,
                                        `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`,
                                        `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                                    ])
                                    .draw()
                            }
                        })
                    }
                });
            });
        });
    }
})
})





function deleteThis(e){
console.log(e.target.getAttribute('data-id'))
}

function disableThis(e){
console.log(e.target.getAttribute('data-id'))
}

Я пробовал много разных методов, в том числе clear() перед добавлением нового rows, но, похоже, ничего не работает. Я просто хочу добавить новую строку без перезагрузки страницы, когда данные возвращаются в самом последнем вызове success.

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

Помощь очень ценится, я все еще застрял в этой Спасибо.

Answer 1

Все еще не могу понять, я примеряю уже 2 дня, у кого-нибудь есть идея продолжить это? Спасибо

Answer 2

Вы должны добавить данные в ajax успешный ответ. Примерно так

You have to add datatable in ajax success response

$(document).ready(()=>{
$.ajax({
    url: 'http://localhost:3000/api/post/getUserData',
    method: 'post',
    dataType: 'json',
    data: {
        "email": window.email,
        "token": window.token
    },
    success: function(data){
    //Add your datatable here
    table.row.add([
                    data.id,
                    data.main,
                    data.shrinked,
                    data.clicks,
                    `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`,
                    `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                ])
                .draw()
    }