使用 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'))
}

在添加新的 rows 之前，我尝试了许多不同的方法，包括 clear() ，但似乎没有任何效果。 我只想在最后一次 success 调用中返回数据时添加一个新行，而不需要重新加载页面。

P.S：数据已成功插入数据库中，并且当用户重新加载页面时，数据也显示在数据表中作为新行，我只想在不重新加载页面的情况下执行此操作。

非常感谢您的帮助，我仍然坚持这一点 谢谢。

Answer 1

您必须在 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()
    }