2

Usando parte de esta guía: enlace

Como defino la tabla:

this.dtOptions = {
  pagingType: 'full_numbers',
  serverSide: true,
  filter: false,
  processing: true,
  autoWidth: true,
  searchable: false,
  ajax: (dataTablesParameters: any, callback) => {
    that.http
      .post(
        this.url+'categorias/listar',
        {
          "nombre": this.categorias.nombre,
          "status": this.categorias.status,
        }
      ).subscribe(
        resp => {
          console.log(resp.data);
          callback({
            recordsTotal: resp.data.length,
            recordsFiltered: resp.data.length,
            data: resp.data
          });
        },
        error => {
          console.log('fallo la conexion al servidor');
        }
      );
  },
  columns: [
    {
      title: 'N°',
      data: 0, 
      searchable: false, 
      orderable: false, 
      render: function( data, type, full, meta ){
        return meta.row+1;
      }
    },
    {
      title: 'Nombre',
      "render": function ( data, type, row ) {
        return row.nombre;
      }
    },
    {
      title: 'Estado',
      "render": function ( data, type, row ) {
        let boton = (row.status) ? 'Activo' : 'Inactivo';
        return boton;
      }
    },
  ],
  order: [[1, 'asc']],
  rowCallback: (row: Node, data: any[] | Object, index: number) => {
    const self = this;
    $('td', row).unbind('click');
    $('td', row).bind('click', () => {
      self.dataTableClick(data, row);
    });
    return row;
  },
  initComplete: function (settings, json) {
  },
  fnDrawCallback: function() {

  },
  responsive: true,
  select: {
      style: 'single'
  }
};

En mi html simplemente coloco:

<table datatable [dtOptions]="dtOptions" 
  id="tabla" class="table table-hover table-fixed"></table>   

Esto me da como resultante lo siguiente: error

Cabe destacar que la cant de resultados por pagina deberían ser 10 y todos los resultados los arroja en cada pagina. ¿Alguna idea de como solucionar esto?

Actualización 1:

El backend es en slim2:

$app->post("/categorias/listar", function() use($app, $db){
    $method = $app->request()->getBody();
    $data = json_decode($method, true);
    echo json_encode($data);
    $sql = "SELECT * FROM categorias AS c ";
    if(
        (($data['nombre'] != '')&&($data['nombre'] != null))||
        (($data['status'] != '')&&($data['status'] != null))
    ){
        $sql .= " WHERE ";
        if(($data['nombre'] != '')&&($data['nombre'] != null)){
            $sql .= " nombre LIKE '%".$data['nombre']."%'";
            $sql .= " AND";
        }
        if(($data['status'] != '')&&($data['status'] != null)){
            $sql .= " status='".$data['status']."'";
            $sql .= " AND";
        }
        $sql = substr($sql, 0, -3);
    }
    $sql .= " ORDER BY nombre";
    try {
        $stmt = $db->query($sql);
        $tables = [];
        while ($row = $stmt->fetch(\PDO::FETCH_ASSOC)) {
            $tables[] = $row;
        }
        $result = array(
            'status' => 'success',
            'code' => 200,
            'data' => $tables,
            'sql' => $sql,
        );
        echo json_encode($result);
    } catch (\PDOException $e) {
        echo json_encode($e->getMessage());
    }
});
6
  • A simple vista no le estas pasando a tu backend la configuración de paginado, ni la de orden (esa info esta en dataTablesParameters), por lo que obviamente siempre estas devolviendo el total de registros en el orden por defecto.
    – Marcos
    Commented el 4 oct. 2018 a las 14:01
  • @Marcos no se como configurar esa parte.
    – bypabloc_
    Commented el 4 oct. 2018 a las 14:08
  • Depende mucho de como lo quieras resolver. Según lo veo, tienes 2 opciones: que lo haga el backend (la cual yo te recomendaría) o el frontend (es decir, recibir TODO, ordenar y paginar el resultado usando la configuración existente en dataTablesParameters
    – Marcos
    Commented el 4 oct. 2018 a las 14:16
  • También me gustaría por backend
    – bypabloc_
    Commented el 4 oct. 2018 a las 14:28
  • Entonces es necesario que edites tu pregunta y agregues en que tecnología esta programado tu backend y las partes del código relevantes a la pregunta.
    – Marcos
    Commented el 4 oct. 2018 a las 14:36

2 respuestas 2

1
+200

Problemas

  • No estas usando ni enviando la información que DataTable pasa a la función ajax (eg: dataTablesParameters).

  • En tu backend esta faltando toda la lógica para leer los datos de orden y paginado.

Solución

En javascript es necesario que envíes dataTablesParameters, el cual tiene posee información de orden y paginado (ver Sent parameters) similar a la siguiente:

{
  "draw": 2, // Indicador de versión
  "columns": [ // Columnas de la tabla
    {"data": 0, "name": "N°", "searchable": false, "orderable": false, "search": {"value": "", "regex": false}}, 
    {"name": "Nombre", "searchable": false, "orderable": true, "search": {"value": "", "regex": false}}, 
    {"name": "Estado", "searchable": false, "orderable": true, "search": {"value": "", "regex": false}}
  ],
  "order": [{ // Orden de las columnas
    "column": 1,
    "dir": "asc"
  }],
  "start": 0, // Indicador de pagina
  "length": 10 // Indicador de cantidad por pagina
}

Para enviarlo, podrías hacer lo siguiente:

...
ajax: (dataTablesParameters: any, callback) => {

  // Agregamos los filtros que actualmente estas enviando
  dataTablesParameters.nombre = this.categorias.nombre;
  dataTablesParameters.status = this.categorias.status;

  that.http
    .post(
      this.url + 'categorias/listar',
      dataTablesParameters // AQUI enviamos los datos
    ).subscribe(
      ....
    );
},

En PHP debes leer dicha información y armar la consulta SQL acorde a la misma. (te recomiendo leer este artículo ¿Cómo evitar la inyección SQL en PHP?)

Así por ejemplo:

$app->post("/categorias/listar", function() use($app, $db){
    $method = $app->request()->getBody();
    $data = json_decode($method, true);
    //echo json_encode($data);

    
    // Condiciones
    $conditions = [];
    $params= [];

    if(!empty($data['nombre'])) {
      $conditions[] = 'C.nombre LIKE ?';
      $params[] = '%'.$data['nombre'].'%';
    }

    if(!empty($data['status'])) {
      $conditions[] = 'C.status = ?';
      $params[] = $data['status'];
    }

    // Si hay condiciones
    $where = '';
    if (!empty($conditions)) {
      $where = ' WHERE' . implode(' AND ', $conditions);
    }

    // Orden
    // Arreglo asociativo donde:
    // - Las claves son los name de las columnas del DataTable JS
    // - Los valores son los nombre de las columnas de la Tabla SQL
    $orderColumns = [
      'Nombre' => 'nombre',
      'Estado' => 'status',
    ];
    $orders = [];
    if (is_array($data['order'])) {
        foreach($data['order'] as $info) {

            $columnName = $data['columns'][$info['column']]['name'];
            $dir = $info['dir'] == 'asc' ? 'ASC' : 'DESC';
            if (isset($orderColumns [$columnName])) {

               $orders[] = $orderColumns [$columnName] . ' ' . $dir;
            }
        }
    }
    // Si no se indico el orden, ponemos un orden por defecto
    if (empty($orders)) {
      $orders[] = "nombre ASC";
    }
    $order = "ORDER BY " . implode(', ', $orders);

    // Paginado
    $offset = (int) $data['start'];
    $length = (int) $data['length'];
    // Si no se indico la cantidad por pagina
    if ($length < 1) {
        $length = 10;
    }
    $limit = 'LIMIT ' . $length . ' OFFSET ' . $offset;

    try {
        // Obtenemos el total de registros en la tabla
        $stmt = $db->prepare(
          "SELECT COUNT(1) AS total
           FROM categorias AS C"
        );
        $stmt->execute();
        $row = $stmt->fetch(\PDO::FETCH_ASSOC);
        $all = $row['total'];

        // Obtenemos el total de registros que cumplen el $where
        $stmt = $db->prepare(
          "SELECT COUNT(1) AS total
           FROM categorias AS C
           $where"
        );
        $stmt->execute($params);
        $row = $stmt->fetch(\PDO::FETCH_ASSOC);
        $total = $row['total'];

        // Obtenemos los registros correspondientes al paginado y ordenados
        $stmt = $db->prepare(
          "SELECT nombre, status
           FROM categorias AS C
           $where
           $order
           $limit"
        );
        $stmt->execute($params);
        $rows = $stmt->fetchAll(\PDO::FETCH_ASSOC);

        $result = array(
            'data' => $rows, // registros de la pagina
            'recordsTotal' => $all, // total registros en la tabla
            'recordsFiltered' => $total, // total registros filtrados
            'draw' => $data['draw'], // Versión
        );
        echo json_encode($result);
    } catch (\PDOException $e) {
        echo json_encode($e->getMessage());
    }
});

NOTA: He tenido que crear la variable $orderColumns debido a que no has indicado para cada columna del DataTable el data (que es el campo sobre el cual se hace el mapeo directo). Así mismo como medida de seguridad, no deberías asumir que lo que viene en esa posición es un valor válido.


Por último, dado que ahora PHP esta devolviendo mas información, es necesario actualizar los datos que le pasas al callback del DataTable (ver Returned data). Así por ejemplo:

...
ajax: (dataTablesParameters: any, callback) => {

  // Agregamos los filtros que actualmente estas enviando
  dataTablesParameters.nombre = this.categorias.nombre;
  dataTablesParameters.status = this.categorias.status;

  that.http
    .post(
      this.url + 'categorias/listar',
      dataTablesParameters
    ).subscribe(
      resp => {
        console.log(resp.data);
        callback(resp); // Aqui pasamos la respuesta
      },
      error => {
        console.log('fallo la conexion al servidor');
      }
    );
},

Referencias:

5
  • Solucione un pequeño error en $limit = 'LIMIT ' . $length . ' OFFSET '.($start * $length); (Esto porque yo uso PostgreSQL). El problema que hay es la paginacion que aun no la reconoce. Acá una captura.
    – bypabloc_
    Commented el 4 oct. 2018 a las 18:12
  • La primera pág, genial, la segunda en adelante no. Capturas: Página 1, Página 2 y Página 3,
    – bypabloc_
    Commented el 4 oct. 2018 a las 19:02
  • Genial, la paginacion esta resulta. Solo falta solucionar el ordenamiento. Capturas: Página 1, Página 2, Página 3 y Página 4,
    – bypabloc_
    Commented el 4 oct. 2018 a las 19:57
  • De hecho si lo había hecho, sucede que no le coloque las iniciales en mayúscula sino en minúsculas. Disculpa esa. Gracias por toda la ayuda.
    – bypabloc_
    Commented el 4 oct. 2018 a las 20:08
  • @PabloContreras, he actualizado (y esta vez espero que sea la ultima) mi respuesta, agregando un comentario. Me alegra haber sido de ayuda, éxitos!
    – Marcos
    Commented el 4 oct. 2018 a las 20:10
0

Si quieres 10 resultados por página, tienes que usar la propiedad pageLength e igualarla a 10

this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,

}

Y en el callback, vuelves a asignar el resultado de la respuesta resp.data a data, en vez de vaciar el array.

Puedes hacer esto:

personas: any (o el tipo que sea) = [];

constructor() blah blah //

this.dtOptions = {
  pagingType: 'full_numbers',
  serverSide: true,
  filter: false,
  processing: true,
  autoWidth: true,
  searchable: false,
  ajax: (dataTablesParameters: any, callback) => {
    that.http
      .post(
        this.url+'categorias/listar',
        {
          "nombre": this.categorias.nombre,
          "status": this.categorias.status,
        }
      ).subscribe(
        resp => {
          that.personas = resp.data;
          callback({
            recordsTotal: resp.data.length,
            recordsFiltered: resp.data.length,
            data: []
          });
        },
        error => {
          console.log('fallo la conexion al servidor');
        }
      );
  },
  columns: [
// etc
3
  • Ya lo había intentado y tampoco lo soluciona.
    – bypabloc_
    Commented el 3 oct. 2018 a las 19:49
  • Acabo de extender la respuesta.
    – nat
    Commented el 3 oct. 2018 a las 19:53
  • Si lo guardo en "that.personas" como sugieres no me lo reconocerá la vista, puesto que no la formulo de la misma manera que en la guía, allí esta el código html que utilizo.
    – bypabloc_
    Commented el 3 oct. 2018 a las 20:18

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.