I have set pagination as 2 but displaying all data

sundartamang

TS FILES

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RootInvestTypeObject } from 'src/app/app-module/app-module.module';
import { config } from 'src/app/config';

@Component({
  selector: 'app-async',
  templateUrl: './async.component.html',
  styleUrls: ['./async.component.css']
})
export class AsyncComponent implements OnInit {

  dtOptions: DataTables.Settings = {};
  investdata: any = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.fetchData()
  }


  fetchData() {

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2,
      serverSide: true,
      processing: true,
      search : true,
      searching: true,

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

        console.log('All Params', dataTablesParameters)
        
        this.http.post<RootInvestTypeObject>(
          config.ANSU_INVEST_API,
          dataTablesParameters, {}
        ).subscribe(resp => {
          this.investdata = resp.data;
          console.warn("RES DATA = ", resp.data)

          callback({
            recordsTotal: resp.count,
            recordsFiltered: resp.count,
            data: []
          });
        });
      },
      columns: [
        { data: 'investment_id' },
        { data: 'investment_type' },
        { data: 'ordering' },
        { data: 'status' },
      ],
    };
  }

}

HTML FILE

<table datatable [dtOptions]="dtOptions" class="display" id="example">
    <thead>
        <tr>
            <th>Invetment id</th>
            <th>Investment type</th>
            <th>Ordering</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody *ngIf="investdata?.length != 0">
        <tr *ngFor="let data of investdata">
            <td>{{data.investment_id}}</td>
            <td>{{data.investment_type}}</td>
            <td>{{data.ordering}}</td>
            <td>{{data.status}}</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>Invetment id</th>
            <th>Investment type</th>
            <th>Ordering</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody *ngIf="investdata?.length == 0">
        <tr>
            <td colspan="3" class="no-data-available">No data!</td>
        </tr>
    </tbody>
</table>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

You've enable serverSide, so that data needs to be returned by the server-side scripts. As you've got barely any records, it would be worth just removing that option as it's only needed when greater than 10k records.

If you do need it, the protocol is discussed here. Also see examples here. If you download the DataTables repo, there are examples of the server-side scripts in /examples/server_side/scripts,

Cheers,

Colin