如何在laravel中使用jquery将行添加到数据表中

Posted 2023-03-14

【中文标题】如何在laravel中使用jquery将行添加到数据表中

【英文标题】：How to add rows into data table using jquery in laravel

【发布时间】：2021-06-19 23:17:31

【问题描述】：

我正在尝试通过 ajax 请求将数据存储到数据库中，并在不重新加载页面的情况下在数据表中显示存储的数据。我的表单数据存储完美，但表格行添加不完美。

这是我的表格

      <form id="videoAddForm" method="POST" enctype="multipart/form-data"> @csrf
                <div class="modal-body">
                    <div class="col-xl-12 col-md-12">
                        <div class="ms-form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="name" value="">
                        </div>
                    </div>
                    <div class="col-xl-12 col-md-12">
                        <div class="ms-form-group">
                            <label for="location">Video Url</label>
                            <input type="text" class="form-control" name="location" value="">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-block btn-success mb-2">Submit</button>

                </div>
            </form>

这里是ajax请求

    $(document).on('submit', '#videoAddForm', function(event) 
        event.preventDefault();
        $.ajax(
            url: config.routes.add,
            method: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            success: function(response) 

                if (response.success == true) 
                    var videoTable = $('#videoTable').DataTable();
                    videoTable.row.add([
                        "" + response.data.name + "",
                        "" + response.data.location + "",
                        "<label class='ms-switch'><input type='checkbox'><span class='ms-switch-slider ms-switch-success round'></span></label>",
                        "<button type='button' class='ms-btn-icon btn-dark mr-3' onclick='editVideo(" +
                        response.data.id +
                        ")'> <i class='flaticon-pencil'></i></button> <button type='button' class='ms-btn-icon btn-danger'  onclick='deleteVideo(" +
                        response.data.id + ")'> <i  class='flaticon-trash'></i></button>",
                    ]).draw();
                    $('#videoTable tr:last').addClass('item' + response.data.id + '');
                    // $('#output_image').empty();
                    // $('#addSlider').modal('hide');
                    if (response.data.message) 
                        html =
                            '<div class="alert alert-success bg-success text-dark text-center" role="alert">' +
                            response.data.message + '</div>';
                        $('#videoAddForm').trigger('reset');

                    
                    $('.showError').fadeIn(100).html(html);
                    $('.showError').fadeOut(3000);


                 else 
                    html =
                        '<div class="alert alert-danger bg-danger text-danger text-center" role="alert">' +
                        response.data.error + '</div>';
                    // $('#addSlider').modal('hide');
                    $('.showError').fadeIn(100).html(html);
                    $('.showError').fadeOut(3000);
                
            , //success end

            beforeSend: function() 
                $('#addVideo').modal('hide');
                $('.ajax_loader').show()
            ,
            complete: function() 
                $('.ajax_loader').hide();
            
        );
    );

这是我的控制器代码

public function videoStore(Request $request) 
    $validator = Validator::make($request->all(), [
        'name'     => 'required|max:255',
        'location' => 'required|max:255',
    ]);
    if ($validator->fails()) 
        $data          = array();
        $data['error'] = $validator->errors()->all();
        return response()->json([
            'success' => false,
            'data'    => $data,
        ]);
     else 
        $videos = Video::create([
            'name'     => $request->name,
            'location' => $request->location,
        ]);
        $data             = array();
        $data['message']  = 'Video created successfully';
        $data['name']     = $videos->name;
        $data['location'] = $videos->location;
        $data['id']       = $videos->id;

        return response()->json([
            'success' => true,
            'data'    => $data,
        ]);
    

在dataTable中，添加了行，但有时在顶部添加行，有时在中间添加行，有时在底部添加。我还想将类添加到新创建的 tr 中。我试过这个

   $('#videoTable tr:last').addClass('item' + response.data.id + '');

但它现在确实有效。 谁能告诉我如何解决这个问题？

【参考方案1】：

你应该像往常一样添加一行，通过ajax插入行后，只需调用

$('#videoTable').DataTable();

就是重新初始化数据表