如何解决如何在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();
就是重新初始化数据表