I have set pagination as 2 but displaying all data

I have set pagination as 2 but displaying all data

sundartamangsundartamang Posts: 1Questions: 1Answers: 0
edited March 2022 in DataTables 1.10


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.

Answers

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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

Sign In or Register to comment.