将DataTable数据加载到编辑模式中

Question

我正在尝试为我的数据表创建一个编辑功能。数据表是使用Yajra数据表创建的。一切正常，除非当我尝试将现有数据加载到编辑模式时失败。没有错误显示，但是模态没有启动。我只在其中包括了我的代码的一小部分，以方便参考。

模式：

<!-- Update Status Model Box -->
    <div id="updateStatusModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content bg-default">                
                <div class="modal-body">
                    <form class="form-horizontal" id="updateStatus">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col">
                                <div class="form-group text-center">
                                    <h6 class="font-weight-bold">Stage 1</h6>
                                    <label for="stage_1" class="switch">
                                        <input type="checkbox" class="form-control" id="stage_1">
                                        <div class="slider round"></div>
                                    </label>
                                </div>
                            </div>                            

                        </div>

                        <div class="row">                            

                            <div class="col">

                                <div class="form-group">
                                    <div class="col-md">
                                        <label for="firstname">Coding</label>
                                        <input type="text" class="form-control" id="first_name" value="" placeholder="Enter Completed Page Count">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" name="update_btn" id="update_btn" class="btn btn-outline-warning">Update</button>
                </div>
            </div>
        </div>
    </div>

jquery功能：

// Edit action
    $(document).on('click', '.updateStatus', function(){


        $tr = $(this).closest('tr');

        var data = $tr.clidren("td").map(function(){
            return $(this).text();
        }).get();

        console.log(data);

        $('#id').val(data[0]);
        $('#job_id').val(data[2]);
        $('#stage_1').val(data[3]);
        $('#conversion').val(data[4]);     

        $('#updateStatusModal').modal('show');

    });

我尝试了发现的这种方法，但是这种方法不起作用。有人可以在这里给我提供任何指示吗？

Answer 1

我只是没有看到您的前端脚本（还有后端代码），但是我可以根据需要共享我的实现。它的工作原理与this (screenshot)中显示的完全一样。在这里，我将前后编码。有功能可以编辑现有的数据表记录，也可以删除记录。