Angular 9 Pagination Not Work

[moh-ari-novan]

I'm submitting a...

[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[x] Question

Current behavior

Pagination not working use Angular-Datatables 9.0.2 in Angular 9.1.12

Expected behavior

Pagination works normally

Minimal reproduction of the problem with instructions

component.ts

ngOnInit(): void {
const that = this;
    this.dtOptions = {
      pagingType : 'full_numbers',
      pageLength : 10,
      serverSide : true,
      processing : true,
      ajax : (dtTableParams : any, callback) => {
        that.service.GetDocumentPaging(dtTableParams).subscribe(res=>{
          that.documentList = res.data;
          callback({
            recordsTotal : res.recordsTotal,
            recordsFiltered : res.recordsFiltered,
            data : []
          });
        });
      },
      columns : [{data:'CategoryName'},{data:'DocumentName'},{data:'DocumentNo'},{data:'RevNo'},{data:'Responsible'},{data:'Accountable'},{data:'Consulted'},{orderable:false}],
    };
  }

component.html

<table datatable [dtOptions]="dtOptions" class="table table-bordered row-border hover">
            <thead>
                <tr>
                    <th>Category Name</th>
                    <th>Document Name</th>
                    <th>Document No.</th>
                    <th>Rev</th>
                    <th>Responsible</th>
                    <th>Accountable</th>
                    <th>Consulted</th>
                    <th>Action</th>
                </tr>
                <tr>
                    <th><input type="text" placeholder="Search Category" name="search-category"/></th>
                    <th><input type="text" placeholder="Search Document Name" name="search-document-name"/></th>
                    <th><input type="text" placeholder="Search Document Number" name="search-document-no"/></th>
                    <th><input type="text" placeholder="Search Rev Number" name="search-rev-no"/></th>
                    <th><input type="text" placeholder="Search Responsible Name" name="search-responsible"/></th>
                    <th><input type="text" placeholder="Search Accountable Name" name="search-accountable"/></th>
                    <th><input type="text" placeholder="Search Consulted Name" name="search-consulted"/></th>
                    <th></th>
                  </tr>
            </thead>
            <tbody *ngIf="documentList != null || documentList?.length != 0">
                <tr *ngFor="let item of documentList">
                    <td style="width: 20%;">{{item.CategoryName}}</td>
                    <td style="width: 20%;">{{item.DocumentName}}</td>
                    <td style="width: 15%;">{{item.DocumentNo}}</td>
                    <td style="width: 5%;">{{item.RevNo}}</td>
                    <td style="width: 10%;">{{item.Responsible}}</td>
                    <td style="width: 10%;">{{item.Accountable}}</td>
                    <td style="width: 10%;">{{item.Consulted}}</td>
                    <td style="width: 10%;"><button class="btn btn-primary btn-sm" (click)=viewDocument(item)><i class="fa fa-eye" aria-hidden="true"></i></button> | <button class="btn btn-success btn-sm" (click)=editDocument(item)><i class="fa fa-pencil" aria-hidden="true"></i></button></td>
                </tr>
            </tbody>
            <tbody *ngIf="documentList == null || documentList?.length == 0">
                <tr>
                    <td colspan="8" class="no-data-available">No data available!</td>
                </tr>
            </tbody>
        </table>

json result

pagination result

Environment

- node version:12.16.1
- angular version: 9.1.2
- angular-cli version:9.1.12
- jquery version:3.5.1
- datatables version:1.10.22
- angular-datatables version:9.0.2

[moh-ari-novan]

the recordFiltered not return all total record, that's make bugs.. THANKS