0

Estoy usando Ajax con dataTable y Laravel para mostrar una consulta en una vista y solo me muestra JSON. Logré hacerlo con Laravel sin usar Ajax. Pero me gustaría dar solución usando Ajax ya que evitaré el parpadeo de la recarga. Espero exponer bien el problema.

Este es mi js, blade y html:

@extends('adminlte::page')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{asset('bootstrap/css/bootstrap.css')}}">
@stop

@section('title', 'Estudiantes Presentes')

@section('content_header')
    
@stop

@section('content')
    <table id="presentes" class="table table-hover table-bordered table-striped display" width="100%">
        <thead class="">
            <tr>
                <th>#</th>
                <th>ESTUDIANTE</th>
                <th>HORARIO</th>

                <th>TIEMPO</th>
                <th>MATERIA</th>
                <th>AULA</th>

                <th>TEMA</th>
                <th>TEMA</th>
                <th>TEMA</th>
                <th width="120px">Opciones</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
    
@stop

@section('js') 
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script> 
    <script src="{{asset('vendor/sweetalert/sweetalert.all.js')}}"></script>

    <script>
        $(document).ready(function() {
            $('#presentes').dataTable({
                "serverSide": true,
                "ordering":false,
                "responsive":true,
                "paging":   false,
                "info":     false,
                "autoWidth":false,
                "columns": [
                        {data: 'id'},
                        {data: 'nombre'},
                        {data: 'horainicio'},
                        {data:'horafin'},
                        {data:'docente_id'},
                        {data:'materia_id'},
                        {data:'aula_id'},
                        {data:'tema_id'},
                        {data:'foto'},
                        {data: 'btn'},
                    ],
                "ajax": "{{ url('clases/presentes/ahorita') }}",
                "columnDefs": [
                    { responsivePriority: 1, targets: 0 },  
                    { responsivePriority: 2, targets: -1 }
                ],
                "language":{
                        "url":"http://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json"
                },  
            });

        } );
    </script>
@stop

Esta es mi ruta en web.php:

Route::get('clases/presentes/ahorita', 'ClaseController@clasesPresentes')->name('clases.presente');

Tengo esto en mi controlador:

public function clasesPresentes(){
    $clases =  Clase::join('programacions', 'clases.programacion_id', '=', 'programacions.id')
                    ->join('inscripciones', 'programacions.inscripcione_id','=', 'inscripciones.id')
                    ->join('estudiantes','inscripciones.estudiante_id','=', 'estudiantes.id')
                    ->join('personas','estudiantes.persona_id','=','personas.id')
                    ->select('clases.id', DB::raw('concat_ws(" ",nombre,apellidop) as nombre'), 'clases.horainicio','clases.horafin','clases.docente_id','clases.materia_id','clases.aula_id','clases.tema_id','personas.foto')->get();                       
    return datatables()->of($clases)
    ->addColumn('btn', 'clase.action_marcar')
    ->rawColumns(['btn', 'foto'])
    ->toJson();
}

esta es una captura de lo que puedo ver después de llamar a la vista. No hay errores en la consola JS vista que obtengo

Esto sucede cuando intento mostrar la vista desde donde llamo a a la vista

1 respuesta 1

0

Ya lo solucioné

  1. El botón o desde donde intentas mostrar los datos solo tiene que encargarse de mostrar la vista

    Route::get('presentes',function(){ return view('clase.presentes'); });

  2. Ajax se encarga de visitar y traer los datos del controlador

  3. como no mostraba en ningún momento la vista el resultado se mostraba en una vista anónima

Saludos desde Bolivia para esta maravillosa comunidad

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.