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

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

JnezsmithJnezsmith Posts: 4Questions: 2Answers: 0

I'm beginners I have some learning of Laravel and jQuery but I don't know how to update and save the data in yajra datatable. I think there's a missing in my code.

`<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){   //Heres the render data that I want to edit and save.
                        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() {  //Heres the edit. I think theres missing in my code.
            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) => {  // Heres the Store. I think theres missing to. 
            $.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>`

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    If you want to edit the data, it would be worth looking at the Editor extension. This provides full CRUD functionality to a DataTable,

    Colin

  • JnezsmithJnezsmith Posts: 4Questions: 2Answers: 0
    edited November 2022

    How can I get the code in the link you sent me

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    Click the download link for Editor :). That will start a free 15 day trial of the software.

    Allan

  • JnezsmithJnezsmith Posts: 4Questions: 2Answers: 0

    How about for the Laravel controller sir? how can make that from controller to jQuery?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    We don't provide Laravel controllers for Editor. The PHP download included generic PHP controllers (they don't use a specific framework). However, if you want Laravel specific integration check out this third party library.

    Allan

Sign In or Register to comment.