首页 > 解决方案 > 使用模式窗口更新行后刷新数据表

问题描述

我将 Jquery Datatable 与 Laravel 5.6 一起用于一个小项目,其中一个数据表列允许编辑特定的行,(顺便说一下,我没有使用必须获得的数据表编辑器插件)。模式窗口包含带有 jquery 逻辑的更新表单,当我单击更新时,我看不到数据表上更新的行更改。

更新数据表行的模式窗口

模态窗口代码

<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 is not a function 错误,我认为它没有获取主窗口的实例。

                  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 上获取提交代码的事实是因为我在表单中放置了隐藏字段,并且必须显示它才能发生这种情况。也许有一种方法可以将数据表实例传递给模态?

标签: laraveldatatables

解决方案


推荐阅读