0

Tengo una lista de ordenes la cual la cargo una tabla con datatables, la cual cada registro tiene un boton para eliminar en base al id, el codigo que tengo es funcional me elimina todo bien; pero mi consulta es como puedo hacer para que una vez eliminado el registro me recargue la tabla con los datos actuales en el datables? sin tener que apretar f5 o hacer un location.

Esta sección es mi vista index.blade.php (Donde traigo los registros y los paso al datables)

@extends('adminlte::page')

@section('title', 'Lista de Ordenes de fabricación')

@section('content_header')

@stop
@section('content')
@include('orders.modal.order-edit-modal')
<div class="py-3">
    <div class="card">
        <div class="card-header py-3" style="background-color: rgb(33,136,201);">
            <span class="col-form-label col-form-label-lg text-white">Lista de ordenes de fabricación <img class="img-fluid" style="height: 40px;" src="{{asset('images/iconos/lista-ordenes.png')}}" alt="documents"></span>
            <a href="{{route('orders.create')}}" style="border-radius:50%" data-toggle="tooltip" data-placement="bottom" title="Agregar nuevo registro" class="btn btn-success btn-sm float-right"><i class="fas fa-plus" style="color:white"></i></a>
        </div>
        <div class="card-body table-responsive col-form-label col-form-label-sm">
            <table id="myTableOrder" class="table table-bordered table-hover tablas" width="100%">
                <thead style="background-color: rgb(204,204,204);">
                    <tr>
                        <th>Codigo</th>
                        <th>Empresa</th>
                        <th>Solicitante</th>
                        <th>Teléfono</th>                        
                        <th>Lugar Entrega</th>
                        <th>Inicio</th>
                        <th>Previsto</th>
                        <th>Fin</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                    <tr>
                        <td>{{$order->cod_document}}</td>
                        <td>{{$order->business}}</td>
                        <td>{{$order->requested}}</td>
                        <td>{{$order->phone}}</td>                       
                        <td>{{$order->delivery_place}}</td>
                        <td>{{$order->start_date}}</td>
                        <td>{{$order->expected_date}}</td>
                        <td>{{$order->end_date}}</td>
                        <td>
                            <a class="btn btn-success btn-sm" id="order_id" data-bs-toggle="modal" data-bs-target="#order-edit-modal" data-toggle="tooltip" data-placement="top" title="Editar registro" onclick="edit_order('{{$order->id}}')"><i class="fas fa-edit"></i></a>
                            <a class="btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Eliminar registro" onclick="delete_order('{{$order->id}}')"><i class="fas fa-trash-alt"></i></a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>

@stop
@section('css')    
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
@stop
@section('js')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
@include('layout-admin.base-js')
<script src="{{asset('app/js/datatable.js')}}"></script>
<script src="{{asset('app/js/order.js')}}"></script>
@stop

En mi archivo datatable.js, llamo a la funcion del datable para que se refleje en mi tabla con los registros de ordenes ya recorridos en el.

$(document).ready(function() {
    $('#myTableOrder').DataTable();
});

Esta es mi funcion donde elimino el registro en base al id que envio en mi ruta.

function delete_order(id){

Swal.fire({
    title: '¿Está seguro de dar de baja la orden?',
    text: "¡No podrás revertir esto!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'si, borralo!',
    cancelButtonText: 'No, cancelar!',
    customClass: 'swal-height'
}).then((result) => {
    if (result.isConfirmed) {
        $.ajax({
            method: 'DELETE',
            url: '/orden/delete/' + id,
            statusCode: {
                200: function (response) {
                  Swal.fire({
                      title: 'Borrado!',
                      text: 'La orden fue dada de baja..',
                      icon: 'success',
                      customClass: 'swal-height'
                  }).then((result) => {
                      if (result.isConfirmed) {
                        location.reload();
                      }
                      else{
                        location.reload();
                      }
                  })
                },
                500: function () {
                    Swal.fire({
                        title: 'Ups!',
                        text: 'Se tubo problemas, consulte con soporte..!',
                        icon: 'error',
                        customClass: 'swal-height'
                    })
                }
            }
        })
    }
})   

}

He visto que algunos llenan la tabla con los registros desde el mismo datables y crean una funcion listar, es conveniente hacer eso? porque yo recorri todos los registro en mi tabla desde mi archivo index.blade.php

1 respuesta 1

0

puedes hacer eso con jquery de esta manera.

Obtienes la referencia de la tabla

const table = $("#myTableOrder").DataTable();

Una vez obtenida, utilizas la siguiente instrucción.

table.ajax.reload();

Al hacerlo automáticamente el datatable se recarga sin la necesidad de que se recargue la pagina.

3
  • Hola, agregue el ajax.reload() referenciando al id con el datables, pero al eliminar mi registro en la parte de reload me sale un mensaje: DataTables warning: table id=myTableOrder - Invalid JSON response. For more information about this error, please see datatables.net/tn/1 Commented el 12 may. 2023 a las 21:22
  • Ya vi porque, lo que pasa es que el datatable no lo llenas por medio de una petición asíncrona, sino que lo haces directamente con laravel. Si quieres que te funcione el reload, vas a tener que cambiar el proceso de como llenar tu tabla. datatables.net/examples/data_sources/ajax.html Este es un ejemplo de como hacer uso de ajax para obtener la data desde el servidor y poder desde el cliente llenar la tabla. Es un proceso necesario para poder hacer uso de ajax.reload(). No es complicado, en youtube hay muchos tutoriales de como hacerlo. Commented el 12 may. 2023 a las 22:15
  • Gracias, acabo de implementar el dataTable ajax en mi proyecto y ya me funciona el ajax.reload; pero he visto que cuando lo puse en mi tabla el buscador no funciona, sabes porque suele no funcionar el buscador? o es mejor crear unos input para hacer una busqueda mas personalizada? Commented el 13 may. 2023 a las 2:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.