0

he hecho esta pregunta antes pero no ha habido respuesta asi que quiero intentarlos de nuevo, sucede que tengo una tabla generada solo con html y php/mysql, que me muestra una serie de registros y me permite agregar, editar y eliminar datos, junto a la tabla tengo un datatables unicamente para que realice el responsive, muestre el buscador y permita separar las filas por paginas, pero sucede que al realizar cualquier accion (agregar, modificar y eliminar) cualquier dato y recargando la tabla con ajax causa que me desaparesca basicamente todo lo que muestra datatables y no vuelve a aparecer a menos que recargue toda la pagina.

he intentado la funcion draw() con datatables, destruir la tabla y crearla de nuevo y el ajax.reload() pero lo maximo que ocurre es que se despliega este alert

DataTables warning: table id=categorias - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

mi pregunta es: ¿forzosamente debo cargarle los datos con json a la tabla solo para que vuelva a mostrar lo que necesito de datatable? o ¿puedo hacer algo para que el datatable "recarque"?

aqui esta la tabla

   <div id="tabla" align="center" class="col-12">
    <table id="categorias">
        <thead>
            <tr>
                <th>#</th>
                <th>Codigo</th>
                <th>Bien</th>
                <th>Fecha pres</th>
                <th>Fecha ent</th>
                <th>Ent</th>
                <th>Responsable</th>
                <th>Solicitante</th>
                <th>Tel. Solicitante</th>
                 <?php
                    if($miarreglo["per_usu"]=="A"){
                ?>
                        <th>Mod</th>
                        <th>Eli</th>
                <?php
                    }
                ?>
            </tr>
        </thead>
        <tbody>
            <?php
                $cont = 1;
                while($arreglo = mysqli_fetch_array($consulta)){
                    ?>
                    <tr>
                        <td><?php echo $cont; ?></td>
                        <td><?php $bien=mysqli_query($conexion,"select * from bienes,tipo,departamentos,responsables where bienes.id_bie='".$arreglo["id_bie"]."' and tipo.id_tb=bienes.id_tb and departamentos.id_dep=bienes.id_dep and responsables.ci_res=departamentos.ci_res");$ess=mysqli_fetch_array($bien); echo $ess["cod_bie"];   ?></td>
                        <td><?php if($arreglo["cantidad"]!=null){ echo $arreglo["cantidad"]."-";} echo $ess["nom_tb"]; ?></td>
                        <td><?php echo $arreglo["fec_pres"]; ?></td>
                        <td><?php if($arreglo["fec_ent"]==""){echo "-";}else{echo $arreglo["fec_ent"];} ?></td>
                        <td><?php if($arreglo["ent_pres"]=="Si"){ echo "<i class='fa fa-check' style='color:green;'></i>";}else{echo "<i class='fa fa-times' style='color:red;'></i>";} ?> </td>
                        <td><?php echo $ess["nom_res"]." ".$ess["ape_res"]; ?></td>
                        <td>
                            <?php 
                                $soli = mysqli_query($conexion,"select * from responsables where ci_res='".$arreglo["sol_pres"]."'");
                               $citante = mysqli_fetch_array($soli);
                                echo $citante["nom_res"]." ".$citante["ape_res"];
                            ?>
                        </td>
                        <td>
                            <?php echo $citante["tel_res"]; ?>
                        </td>
                        <?php
                            if($miarreglo["per_usu"]=="A"){
                        ?>
                            <td><button class="btn btn-primary" onclick="datosModal('Modificar','<?php echo $arreglo["id_pres"]; ?>')" data-toggle="modal" data-target="#modal-success"><i class="fa fa-wrench"></i></button></td>
                            <td><button class="btn btn-danger" onclick="datosModal('Eliminar','<?php echo $arreglo["id_pres"]; ?>')" data-toggle="modal" data-target="#modal-success"><i class="fa fa-trash"></i></button></td>
                        <?php
                            }
                        ?>
                    </tr>
                    <?php
                    $cont++;
                }
            ?>
        </tbody>
    </table>
</div>

y aquí el datatables

    $('#categorias').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": false,
      "info": true,
      "autoWidth": false,
      "responsive": true,
   });
 

2 respuestas 2

0

Efectivamente, datatables.ajax.reload() funciona cuando la carga de los datos del objeto Datatables se realiza del lado del servidor (server side). En tu caso debes hacer uso del api de Datatables, y para facilitarte las cosas, y te funcionen tanto el isert, delete o update, lo mas facil seria como parte de las respuestas ajax, devolver el conjunto de registros del datatables, hacer un clear del mismo, y por ultimo recorrer el json devuelto y agregar filas con el add del api de datatables.

$(document).ready(function () {
    // debes tener referencia en tu vista al objeto datatables creado en una variable:
    var _dataTablesObject = $('#categorias').DataTable({
          "paging": true,
          "lengthChange": true,
          "searching": true,
          "ordering": false,
          "info": true,
          "autoWidth": false,
          "responsive": true,
       });         
    
    // peticion ajax que inserta registro, edita o elimina no se como la has confeccionado no la muestras:
    $.ajax({
        // parametros del ajax request      
        
    }).done(function(coleccionRegistrosJSON){
        // limpia filas del datatables
        _dataTablesObject.clear();
        
        // agregas nuevamente los registros frescos de la base de datos
        $.each(coleccionRegistrosJSON, function (idx, obj) {
                _dataTablesObject.row.add(obj.atributoUno, obj.atributo2, objeto.atributoN);               
            });

        // redibujas el datatables
        _dataTablesObject.draw();
        
    });
});

Al final si son muchos los registros que tendrá tu datatables, es recomendable hacerlo server side.

Prueba la idea y comenta, puede tener errores la idea.

0

Cuando generas la tabla por primera ves se genera una instancia de DATATABLE, entonces cuando intentas generar de nuevo la tabla, te marca ese error porque no puedes "reinstanciar" por así decirlo, una manera más corta a la de @Francisco es aplicando el bDestroy a la instacia de la tabla:

$('#tabla_listado_pagos').DataTable({
    bDestroy: true
});

Entonces ahora cada que cargues datos, destruye la instancia y la vuelve a generar

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.