How can I edit the render data in datatable using jquery in laravel?

Jnezsmith

<script>
    $(document).ready(function() {        
         $("#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;
                }, 
                },
            ]
        });    

        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);
                    // console.log(html);
                },
                success: function(html) {
                    // console.log(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) {
                        // document.getElementById("cancel").click();
                        // $("#emp_no").val(data.count);
                        // $("#approve_table").DataTable().ajax.reload();
                        // myTable.ajax.reload();
                        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");
                        // myTable.clear().draw();
                    }
                    $('input#checkAll2').prop('checked', false);
                    $('input#checkbox_id').prop('checked', false);
                    chkbox = []; 
                }
            });
        }

    });

</script>

colin

It looks like you're calling columns.render, what's the problem, you haven't said.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin