Laravel+jQuery Ajax操作Yajra DataTable数据无更新问题求助

我是Laravel和jQuery的初学者，有一定基础，但不清楚如何在Yajra DataTable中更新并保存数据，怀疑代码存在缺失。尝试添加dataTable.draw()代码后，点击保存按钮仍无任何反应。

DataTable初始化代码 #

var dataTable = $("#approve_table").DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: "{{ route('approve_manual.index') }}"
    },
    columns:[
        // { data: 'action', name: 'action', orderable: false },
        { data: "view", name: "view", orderable: false },
        { data: "chkbox", name: "chkbox", orderable: false },
        {
            data: "picture",
            name: "picture",
            render: function(data, type, full, meta) {
                if (data != '' || data != null) {
                    return (
                        "<img src={{ asset('storage/pictures/') }}/" +
                        data +
                        " loading='lazy' width='30' class='img-thumbnail' />"
                    );
                } else {
                    return (
                        "<img src={{ asset('storage/pictures/blank.png') }}/" + " width='30' class='img-thumbnail' />"
                    );
                }
            },
            orderable: false
        },
        { data: 'name', name: 'name' },
        { data: 'date', render: $.fn.dataTable.render.moment( 'dddd D MMMM YYYY' ) },
        { data: 'category', name: 'category' },
        // { data: 'duration', name: 'duration' },
        { data: "duration",
            render: function(data, type, row){
                var strings = row.duration;
                var temp = strings.split(":")

                for (let index = 0; index < temp.length; index++) {
                var hr = temp[0];
                var mins = temp[1];
                var sec = temp[2];

                
                var zero = hr.charAt(0)
                var one = hr.charAt(1)
                var two = mins.charAt(0)
                var three = mins.charAt(1)

                
                if (hr != 00 && mins != 00){
                    var time = hr + ' hr, ' +  mins + ' mins';
                }
                else if (hr != 00 && mins == 00){
                    if ( zero == 0 ) {
                        time = one + ' hr ';
                    }
                    else{
                        time = temp[0] + ' hr ';
                    }
                }
                else if (hr == 00 && mins != 00){
                    if ( two == 0 ) {
                        time = three + ' mins';
                    }
                    else{
                        time = temp[0] + ' mins';
                    }
                }
                else if (hr == 00 && mins == 00 && sec == 00){
                    var time = '1 Day';
                }
                return time;
                }
            }, 
        },
        { data: "amount",
        render: function(data, type, row){
            return '₱ ' +  row.amount;
        }, 
        },
    ]
});    

查看弹窗AJAX代码 #

var id;
$(document).on("click", ".view", function() {
    id = $(this).attr("id");
    $.ajax({
        url: "/admin/approve_manual/" + id + "/edit",
        dataType: "json",
        error: function (html) {
            // console.error(html);
       
        },
        success: function(html) {
            
            document.getElementById("blah").src = "{{ asset('storage/pictures/') }}" + '/' + html.data[0].picture;
            $("#approve_id").val(html.data[0].idx);
            $("#name").text(html.data[0].name);
            $("#emp_no").val(html.data[0].emp_no);
            $("#date").val(html.data[0].date);
            $("#category").val(html.data[0].category);

            var strings = html.data[0].duration;
            var temp = strings.split(":");
            var hr = temp[0];
            var mins = temp[1];
            var sec = temp[2];
            var zero = hr.charAt(0)
            var one = hr.charAt(1)
            var two = mins.charAt(0)
            var three = mins.charAt(1)
            
            if (hr != 00 && mins != 00){
                var time = hr + ' hr, ' +  mins + ' mins';
            }
            else if (hr != 00 && mins == 00){
                if ( zero == 0 ) {
                    time = one + ' hr ';
                }
                else{
                    time = temp[0] + ' hr ';
                }
            }
            else if (hr == 00 && mins != 00){
                if ( two == 0 ) {
                    time = three + ' mins';
                }
                else{
                    time = temp[0] + ' mins';
                }
            }
            else if (hr == 00 && mins == 00 && sec == 00){
                var time = '1 Day';
            }
            $("#duration").val( time );

            // $("#duration").val(html.data[0].duration);
            $("#amount").val(html.data[0].amount);
            

            $("#approve_modal").modal("show");
        }
    });
});

保存函数代码 #

const save = (status, id_list) => {
    $.ajax({
        url: "{{ route('approve_manual.store') }}",
        data: {
            "_token": "{{ csrf_token() }}",
            id : id_list,
            status : status
        },
        method: "POST",
        error: function(data){
            console.log(data);
        },
        success: function(data) {
            // console.log(data);
            
            var html = "";
            if (data.errors) {
                error(data.errors);
            }
            if (data.payroll) {
                check_payroll();
                $("#approve_modal").modal("hide");
                document.getElementById("loading").style.display = "none";
            }
            if (data.success) {
              
                dataTable.ajax.reload(null, false);
                document.getElementById("approve_for_many").removeAttribute("disabled");
                document.getElementById("unapprove_for_many").removeAttribute("disabled");
                document.getElementById("approve_each").removeAttribute("disabled");
                document.getElementById("unapprove_each").removeAttribute("disabled");
                document.getElementById("loading").style.display = "none";
                success(data.success);
                $("#approve_modal").modal("hide");
            }
            $('input#checkAll2').prop('checked', false);
            $('input#checkbox_id').prop('checked', false);
            chkbox = []; 
        }
    });
}

   
});

我添加的代码 #

尝试在保存成功回调末尾添加dataTable.draw()：

if (data.success) {
      
    dataTable.ajax.reload(null, false);
    document.getElementById("approve_for_many").removeAttribute("disabled");
    document.getElementById("unapprove_for_many").removeAttribute("disabled");
    document.getElementById("approve_each").removeAttribute("disabled");
    document.getElementById("unapprove_each").removeAttribute("disabled");
    document.getElementById("loading").style.display = "none";
    success(data.success);
    $("#approve_modal").modal("hide");
}
$('input#checkAll2').prop('checked', false);
$('input#checkbox_id').prop('checked', false);
chkbox = []; 
dataTable.draw();

但点击保存按钮后仍无任何反应。

内容的提问来源于stack exchange，提问作者Jnix Gutierrez