0

Carga todos los datos de la consulta, pero no desaparece el texto "Processing..." y no configura la tabla como es, porque debería de crear la paginacion.

categoria.component.html

<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody *ngIf="categoria?.length != 0">
      <tr *ngFor="let categorias of categoria">
	      <td>{{ categorias.id }}</td>
	      <td>{{ categorias.nombre }}</td>
	      <td>{{ categorias.status }}</td>
      </tr>
  </tbody>
  <tbody *ngIf="categoria?.length == 0">
    <tr>
      <td colspan="3" class="no-data-available">No data!</td>
    </tr>
  <tbody>
</table>

categoria.component.ts

this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  serverSide: true,
  processing: true,
  ajax: (dataTablesParameters: any, callback) => {
    this._categoriaService.getCategorias().subscribe(
      result => {
        if(result.code != 200){
          console.log(result);
        }else{
          this.categoria = result.data;
        }
      },
      error => {
        console.log(error);
      }
    );
  },
  columns: [{ data: 'id' }, { data: 'nombre' }, { data: 'status' }]
};

Imagen del error: Processing...

El Json que obtengo de la url es el siguiente:

{
  "status": "success",
  "code": 200,
  "data": [
    {
      "id": 6,
      "nombre": "jardin",
      "status": true
    },
    {
      "id": 7,
      "nombre": "ciudad",
      "status": true
    },
    {
      "id": 8,
      "nombre": "flores",
      "status": true
    },
    {
      "id": 9,
      "nombre": "fantasia",
      "status": true
    },
    {
      "id": 18,
      "nombre": "Espacio",
      "status": true
    },
    {
      "id": 23,
      "nombre": "Tela",
      "status": true
    },
    {
      "id": 24,
      "nombre": "Cultura",
      "status": true
    },
    {
      "id": 25,
      "nombre": "Pais",
      "status": true
    },
    {
      "id": 26,
      "nombre": "Hogar",
      "status": true
    },
    {
      "id": 27,
      "nombre": "Zapatos",
      "status": true
    },
    {
      "id": 28,
      "nombre": "Pantalones",
      "status": true
    },
    {
      "id": 29,
      "nombre": "Insigneas",
      "status": true
    },
    {
      "id": 30,
      "nombre": "Cuadros",
      "status": true
    },
    {
      "id": 31,
      "nombre": "Baño",
      "status": true
    }
  ]
}

1 respuesta 1

0

Según la documentación datatables - processing puedes poner como false mediante el sgte codigo.

"processing": false,

Para lo que es paginacion puedes poner esté codigo

"paging": true,
"lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
"pageLength": 10,

Suerte.

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.