Saltar al contenido principal

Error con DataTables

Comentarios

16 comentarios

  • Alejandro Torres

    Hola Mauricio Lopez cómo es que no funciona? Te muestra algún error por pantalla o consola del navegador?

    Podrías subir una captura del error o link para verlo?

    0
  • Mauricio Lopez

    Hola Alejandro, adjunto captura de como se ve en local y como en el servidor. Notá que no se ve la paginación, tampoco la busqueda, me muestra los registros, pero aparentemente no carga la libreria y la estoy cargando CDN tanto en local como del lado del servidor.

    0
  • Miguel Vilaboa

    Hola!

    En la consola del Chrome ves algún error o advertencia? Que quizás no este bajando la libreria o no se este inicializando?

    0
  • Mauricio Lopez

    Eso es lo raro Miguel, no hay ningun error, aparentemente esta cargando todo bien, lo raro es que funcione bien en local y no en el servidor, siendo que las librerias las carga todas por CDN

     

    0
  • Miguel Vilaboa

    En network podés ver que realmente se esten descargando las librerias de datatables y jquery?

    0
  • Mauricio Lopez

    Si, se cargan todas a la perfección.

    0
  • Miguel Vilaboa

    Como inicializas el datatable? Lo asocias al evento document.ready?

    0
  • Mauricio Lopez

    Si exactamente, 

    $(document).ready(function () {
      $('#example').DataTable({
        "columnDefs": [{
          "targets": 0
        }],
        language: {
          "sProcessing": "Procesando...",
          "sLengthMenu": "Mostrar _MENU_ resultados",
          "sZeroRecords": "No se encontraron resultados",
          "sEmptyTable": "Ningun dato disponible en esta tabla",
          "sInfo": "Mostrando resultados _START_-_END_ de  _TOTAL_",
          "sInfoEmpty": "Mostrando resultados del 0 al 0 de un total de 0 registros",
          "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
          "sSearch": "Buscar ",
          "sLoadingRecords": "Cargando...",
          "oPaginate": {
            "sFirst": "Primero",
            "sLast": "Ultimo",
            "sNext": "Siguiente",
            "sPrevious": "Anterior"
          },
          "iDisplayLength": 50, 
          "processing": true,
          "serverSide": true,
        }
      });
    });
    0
  • Miguel Vilaboa

    Hay 2 cositas que no entiendo, usas serverSide pero no le especificas una fuente de datos para que tome y haga el filtrado y paginado por backend.Quizás venga por aca el problema, que al ser remoto no se inicializa porque no tiene fuente de datos.


    Tambien la definción de columnas (columnDefs), si lo haces serverside, tenes que especificar todas o ninguna. Si no es serverside no es necesario definir nada.

    0
  • Mauricio Lopez

    Perfecto Miguel, voy a trabajar en eso y te aviso. Muchas gracias por tu tiempo.

     

    Saludos

    0
  • Miguel Vilaboa

    Si tu intensión es hacerlo serverside, te dejo un ejemplo de como lo utilizo para un listado de Clientes paginado y filtrado por el backend.

    Configuro todo el objeto datatable en un objeto con una función init y después de toda esa definición de la misma la ejecuto.

    Tambien tengo el archivo de idioma aparte.

    var assetListVM;
    $(function () {
    assetListVM = {
    dt: null,
    init: function () {
    dt = $('#tablaClientes').DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": {
    "url": "/Clientes/Listar",
    type: 'POST'
    },
    "columns": [
    { "title": "Nombre o Razón Social", "data": "RazonSocial", "searchable": true },
    { "title": "Documento", "data": "Identificador", "searchable": true },
    { "title": "Email", "data": "Email", "searchable": true },
    { "title": "Dirección", "data": "Direccion", "searchable": true },
    { "title": "Localidad", "data": "Localidad", "searchable": true },
    { "title": "Codigo Postal", "data": "CodigoPostal", "searchable": true },
    { "title": "Provincia", "data": "Provincia.Nombre", "searchable": true },
    ],
    "language": {
    "url": "/Scripts/datatables/spanish.json"
    },
    "lengthMenu": [[10, 25, 50], [10, 25, 50]],
    responsive: true,
    autoWidth: false
    });
    }
    }
    assetListVM.init();
    });
    0
  • Mauricio Lopez

    Muchas gracias GENIO!!

    0
  • Mauricio Lopez

    Hola Miguel, estuve trabajando todo el dia en lo que me mandaste. Ahora me arroja un error del cual no puedo salir. Te adjunto el codigo y la captura del error. Te comento algo que hace cuando cambio el valor serverside a false, en local funciona perfecto, cuando lo paso a true deja de funcionar, pero en ambos casos sigue sin funcionar en el servidor.

    $(document).ready(function () {
      $("#listaproductos").DataTable({
              "serverSide": true,
              "processing": true,
              "paging": true,
              language: {
                "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
              },
              ajax: {
                "url": "datos_productos.php",
                "type": 'POST'
              },
              "columns": [
                { "title": "ID", "data": "id_producto", "searchable": true },
                { "title": "PRODUCTO", "data": "descripcion", "searchable": true },
                { "title": "P.COSTO", "data": "precio_costo", "searchable": true },
                { "title": "P.VENTA", "data": "precio_venta", "searchable": true },
                { "title": "RUBRO", "data": "rubro", "searchable": true },
                { "title": "SUCURSAL", "data": "nombre_sucursal", "searchable": true },
                { "title": "IMPRESORA", "data": "impresora", "searchable": true },
              ],
              "responsive": true,
              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
              "iDisplayLength": 10,
              "aaSorting": [[1, 'asc']],
            });
    });
     
    y con esto genero el array
     
    <?php
    include_once('conexion.php');
    $database = new Connection();
    $db = $database->open();

    $sql = "SELECT id_producto,descripcion,precio_costo,precio_venta,rubro,nombre_sucursal,impresora FROM vistaproductos";

    $prep = $db->prepare($sql);
    $prep->execute();
    $result = $prep->fetchAll(PDO::FETCH_ASSOC);
    $totalregistros = $prep->rowCount();
    $registrosfiltrados=$totalregistros;

    $data = [];
    foreach ($result as $key => $value) {
        $InfoData = [];
        foreach ($value as $key1 => $value1) {
            $InfoData[$key1] = $value1;
        }
        $data[] = $InfoData;
    }

    $id=1;
    echo json_encode(array("draw"=>(int)$id,"recordsTotal" => $registrosfiltrados,
                                            "recordsFiltered" => $totalregistros,
                                            "data"=> $data));
    ?>
     
    Te agradezco si me das una manito. Gracias
    0
  • Miguel Vilaboa

    Que error te esta dando?

    Por lo que estoy viendo en el código no estas filtrando ni páginando via backend por más que le pedis los datos al back de forma dinámica. Eso puede llevar a algún compartamiento no esperado.

    Por ejemplo: Si vos paginas en el backend. Cuando pasa a la página 2, el front le dice al back hace el draw número 2 y una toma de 10 elementos. Con el código que pones aca, siempre le devolves al front el draw número 1 y la cantidad de elementos va a depender de los que recuperes de la base de datos y no los 10 que espera el front.

     

    0
  • Mauricio Lopez

    Hice la siguiente modificacion:

    $requestData = $_REQUEST;
    header('Content-Type: text/html; charset=utf-8');
    echo json_encode(array(
                            "draw" => intval($requestData['draw']),
                            "recordsTotal" => $registrosfiltrados,
                            "recordsFiltered" => $totalregistros,
                            "data"=> $data), \JSON_UNESCAPED_UNICODE);
    ?>
    Pero me sigue arrojando error (ver adjunto) Estoy por desistir (probe de todas las formas posible y no encuentro el error)
    0
  • Miguel Vilaboa

    Fijate en el network que te esta trayendo el POST para recuperar los datos del back. Por lo que veo en tu captura entiendo que tenes el display_error en E_ALL por ende desde un simple NOTICE de php te rompe la sintaxis del mensaje del back y por ende te da ese error. Te recomendaria para ese archivo puntualmente desactivarlo si es el caso de que observes que los notice y los warnings te esten rompiendo el mensaje de respuesta.

     

    Con la modificación que hiciste logras solucionar el tema del "draw" pero la cantidad de registros que envias en data no es necesariamente la cantidad que espera recibir. En el ejemplo anterior que te di, si tenes el páginado en 10 elementos, siempre y cuando haya 10 o menos registros todo bien. Si hay más puede causar problemas.

     

    Si el páginado serverside te esta complicado, la solución NO ideal es hacer el páginado en el navegador. Cuando termina de cargar la página convierte toda una tabla a datatable. Esta solución es mala si contiene demasiados registros.

    $(document).ready(function () {
    $("#listaproductos").DataTable({
    });
    });

    <table id='listaproductos'>

    <thead>

    <th>1</th>

    </thead>

    <tbody>

    <tr>

    <td></td>

    <td></td>

    </tbody>

    </table>

     

    0

Iniciar sesión para dejar un comentario.