Datatable html js Jquery no muestra los datos json

Datatable html js Jquery no muestra los datos json

NicolasssrgggNicolasssrggg Posts: 2Questions: 1Answers: 0
edited April 2023 in Free community support

Hola, he realizado varias pruebas para poder crear una paginación estable ya que tengo cerca de 17.000 datos, pero cuando los cargo no los muestra en la tabla, he intentando de todo, pero me toco dejar los datos con limite de días de creación para que la pagina cargue bien con 800 datos, pero la idea de la aplicación es que por cada pagina muestre los datos que necesite y no muestre todos los que tenemos porque se demoraría mucho en cargar, soy nuevo en el desarrollo de JavaScript.

Este es el código que tengo actualmente par la paginación

Este es el HTML


<div class="container-fluid"> <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div class="table-responsive"> <table id="datatable_jornadas" class="table table-sm table-light table-striped table-hover table-responsive table-bordered"> <caption> Todas las Jornadas </caption> <div class="d-grid gap-2 d-md-flex justify-content-md-end"> <a class="nav-link" href="/jornadas/importar/"> <button class="button btn1 " id="import"><span>Importar xlsx</span></button> </a> <a class="nav-link" href="/jornadas/exportar/"> <button class="button btn1" id="export"><span>Exportar xlsx</span></button> </a> </div> <br> <thead class="table-dark"> <tr> <th class="centered">No.</th> <th class="centered">Empleado</th> <th class="centered">Documento</th> <th class="centered">Inicio Jornada</th> <th class="centered">Salida Jornada</th> <th class="centered">Inicio Descan 1</th> <th class="centered">Salida Descan 1</th> <th class="centered">Inicio Descan 2</th> <th class="centered">Salida Descan 2</th> <th class="centered">Jor Legal</th> <th class="centered">Total H</th> <th class="centered">Hor Diu</th> <th class="centered">Hor Noc</th> <th class="centered">Hor Ex Diu</th> <th class="centered">Hor Ex Noc</th> <th class="centered">Hor Diu Fes</th> <th class="centered">Hor Noc Fes</th> <th class="centered">Ex Diu Fes</th> <th class="centered">Ex Noc Fes</th> <th class="centered">Creación</th> <th class="centered">Usuario</th> </tr> </thead> <tbody id="tableBody_jornadas"></tbody> </table> </div> </div> </div>

y este es el js que cree

 $(document).ready(function () {
    $('#datatable_jornadas').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        responsive: true,
        ajax: {
            dataType: "json",
            url: "http://127.0.0.1:8000/lista/jornadas/",
            type: "POST",   
        },
        columns: [
            { "data": "id" },
            { "data": "empleado_nombre" },
            { "data": "empleado_cedula" },
            { "data": "inicio_jornada_global" },
            { "data": "salida_jornada_global" },
            { "data": "inicio_descanso_global" },
            { "data": "salida_descanso_global" },
            { "data": "inicio_descanso_global2" },
            { "data": "salida_descanso_global2" },
            { "data": "jornada_legal" },
            { "data": "total_horas" },
            { "data": "diurnas_totales" },
            { "data": "nocturnas_totales" },
            { "data": "extras_diurnas_totales" },
            { "data": "extras_nocturnos_totales" },
            { "data": "diurnos_festivo_totales" },
            { "data": "nocturnos_festivo_totales" },
            { "data": "extras_diurnos_festivo_totales" },
            { "data": "extras_nocturnos_festivo_totales" },
            { "data": "fh_transaccion" },
            { "data": "user_id" },
        ],
        columnDefs: [
            {
                className: "centered",
                targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
            },
            { orderable: false, targets: [21] },
            { searchable: false, targets: [0, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 19, 20, 21] }
        ],
        paging: true,
        pageLength: 50,
        language: {
            search: "Buscar:",
            lengthMenu: "Mostrar _MENU_ registros",
            info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
            infoEmpty: "Mostrando 0 a 0 de 0 registros",
            infoFiltered: "(filtrado de _MAX_ registros en total)",
            paginate: {
                first: "Primero",
                last: "Último",
                next: "Siguiente",
                previous: "Anterior",


            },
        },
    });
});  

Con esto se supone que me debería mostrar los datos pero no entiendo que falta para mostrarlos, ya que se queda cargando y no muestra nada.
Quedo atento con su colaboración, muchas gracias.

Answers

  • kthorngrenkthorngren Posts: 20,359Questions: 26Answers: 4,777

    When you enable server side processing you need to have a server script that supports the server side processing protocol. Are you using a Datatables supplied server script?

    Kevin

  • NicolasssrgggNicolasssrggg Posts: 2Questions: 1Answers: 0

    Habilite desde el javascript el protocolo de procesamiento del lado del servidor, estoy usando Jquery para mostrar el datatable, y el script es el que tengo de javascript para que se haga la proceso, ósea, lo que quiero es mostrar los datos cada vez que yo vaya cambiando de pagina, sin que se carguen todos de una porque me estalla el computador de tantos datos, todo lo estoy haciendo con python django, js, html y Jquery.

  • kthorngrenkthorngren Posts: 20,359Questions: 26Answers: 4,777

    I'm doing everything with python django, js, html and Jquery.

    You need to use a server script that supports the server side processing protocol. Datatables doesn't supply a Python/Django script for this. You can create your own code or find a third party library like this.

    Kevin

Sign In or Register to comment.