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

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

我正在尝试通过 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,]);
    }
}

在dataTable中,行添加但有时行添加在顶部,有时行添加到中间&有时添加在底部。另外我想将类添加到新创建的 tr 中。我试过了

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

但现在它确实起作用了。 谁能告诉如何解决这个问题?

解决方法

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

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

就是重新初始化数据表

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?