我正在将Jquery Datatable与Laravel 5.6一起用于一个小型项目, datatable列之一允许编辑特定行(顺便说一句,我没有使用必须使用的datatable编辑器插件)。 模态窗口包含带有jquery逻辑的更新表单,当我单击“更新”时,我看不到数据表中已更新的行发生了更改。
modal window to update datatable row
模式窗口代码:
<div class="row padded">
<div class="col-md-12">
<div class="form-group">
</div>
{!! Form::open([ 'route' =>['srh.prestamo_pago.update', $prestamo_pago->id] ,'method' => 'PUT', 'id' => 'frmEdit_pago']) !!}
<div class="form-group">
{{ Form::label('Nro Cuota', 'Nro Cuota') }}
{{ Form::text('nro_cuota', $prestamo_pago->nro_cuota, array('class' =>'form-control', 'required' =>'', 'max-length' => '50', 'id' => 'nro_cuota')) }}
</div>
<div class="form-group">
{{ Form::label('Monto Cuota', 'Monto cuota') }}
{{ Form::text('monto_cuota', $prestamo_pago->monto_cuota, array('class' =>'form-control', 'required' =>'', 'max-length' => '50','id' => 'monto_cuota', "readonly" )) }}
</div>
<div class="form-group">
{{ Form::label('Fecha Pago', 'Fecha Pago') }}
@if(isset($prestamo_pago->fecha_pago))
{{ Form::text('fecha_pago', date("d/m/Y", strtotime($prestamo_pago->fecha_pago)) , array('class' =>'form-control datepicker1', 'required' =>'', 'max-length' => '50','id' => 'fecha_pago')) }}
@else
{{ Form::text('fecha_pago', null , array('class' =>'form-control datepicker1', 'required' =>'', 'max-length' => '50','id' => 'fecha_pago')) }}
@endif
</div>
<div class="form-group">
{{ Form::label('Fecha Vencimiento', 'Fecha Vencimiento') }}
{{ Form::text('fecha_vencimiento', date("d/m/Y", strtotime($prestamo_pago->fecha_vencimiento)), array('class' =>'form-control', 'required' =>'', 'max-length' => '50','id' => 'fecha_vencimiento', 'readonly'=>'')) }}
</div>
<div class="form-group">
{{ Form::label('Seleccione', 'Seleccione Estado') }}
{{ Form::select('estado_cuota', array( 'CANCELADO' =>'CANCELADO', 'PENDIENTE' =>'PENDIENTE'), $prestamo_pago->estado_cuota, array('class' =>'form-control', 'required' =>'', 'id' => 'estado_cuota'))}}
</div>
<div class="form-group">
{{ Form::label('Tipo Asiento', 'Tipo Asiento') }}
<input name="tipo_asiento" type="text" value="{{ $prestamo_pago->tipo_asiento_ingreso }}" id="tipo_asiento" class="form-control" readonly="readonly">
</div>
<div class="form-group">
{{ Form::label('Tipo Obligacion', 'Tipo Obligacion') }}
<input name="tipo_obligacion" type="text" value="{{$prestamo_pago->tipo_obligacion_ingreso}}" id="tipo_obligacion" class="form-control" readonly="readonly">
</div>
<div class="form-group">
{{ Form::label('Codigo Cuenta', 'Codigo Cuenta ') }}
{{ Form::text('cod_cuenta', $prestamo_pago->cod_cuenta, array('class' =>'form-control', 'required' =>'', 'max-length' => '50','id' => 'cod_cuenta','readonly'=>'')) }}
</div>
<div class="form-group">
{{ Form::label('Observación')}}
{{ Form::textarea('glosa', null,
array('class' => 'form-control',
'id' => 'glosa',
'size' => '30x3',
'required' => '',
'placeholder' => 'Ingrese Observación')) }}
</div>
<div class="form-group">
{{ Form::hidden('id_cuota', $prestamo_pago->id, array('id' => 'id_cuota')) }}
{{ Form::hidden('estado_final_cuotas','', array('id' => 'estado_final_cuotas')) }} // SI SE HAN CANCELADO TODAS LAS CUOTAS
{{ Form::hidden('prestamo_solicitud_id', $prestamo_pago->prestamo_solicitud_id, array('id' => 'prestamo_solicitud_id')) }}
{{ Form::hidden('nro_obligacion', '', array('id' => 'nro_obligacion')) }}
{{ Form::hidden('nro_asiento', '', array('id' => 'nro_asiento')) }}
{{ Form::hidden('contracuenta','', array('id' => 'contracuenta')) }}
{{ Form::submit('Actualizar Pago', array('class' => 'btn btn-primary btn-block', 'style' => 'margin-top:20px')) }}
</div>
{!! Form::close() !!}
</div>
</div>
<script type="text/javascript">
$(function(){
// FORM DATA AND HIDDEN FORM FIELDS
$('#frmEdit_pago').on('submit', function(e){
e.preventDefault();
var id = $('#id_cuota').val();
var tipo_asiento = $('#tipo_asiento').val();
var tipo_obligacion = $('#tipo_obligacion').val();
var cuenta_ingreso = $('#cod_cuenta').val();
var nro_cuota = $('#nro_cuota').val();
var prestamo_solicitud_id = $('#prestamo_solicitud_id').val();
var estado_cuota = $('#estado_cuota').val();
//pass search params and get data from database , then load hidden form fields
$.get('prestamo_pago/get_datos_contables',
{
'tipo_obligacion':tipo_obligacion,
'tipo_asiento': tipo_asiento,
'cuenta_ingreso' : cuenta_ingreso,
'nro_cuota' : nro_cuota,
'prestamo_solicitud_id' : prestamo_solicitud_id,
},
function(data) {
console.log(data);
$('#nro_obligacion').val(data.nro_obligacion);
$('#nro_asiento').val(data.nro_asiento);
$('#contracuenta').val(data.contracuenta.contracuenta_gasto);
var frm = $('#frmEdit_pago')[0];
var send = $(frm).serializeArray();
$.post(frm.action, send,
function(data) {
console.log(data);
//*****************************************************************
这里我想刷新数据表以显示更新的行,我得到的是datatable1.rows.data不是函数错误,我认为它没有获取主窗口的实例。
datatable1.clear().draw();
datatable1.rows.data(data.cuotas_prestamo).draw();
//******************************************************************
toastr.success('Se ha guardado la información');
$('#modal-pago').modal('hide');
},'json'
).fail(funFail);
},'json'
).fail(funFail);
});
});
PS.-我在模式窗口中而不是在持有可数据化的index.php上获取提交代码的事实,是因为我将隐藏字段放入表单中,因此必须将其显示出来。也许有一种方法可以将数据表实例传递给模态?