l-lin / angular-datatables

DataTables with Angular
https://l-lin.github.io/angular-datatables/
MIT License
1.57k stars 486 forks source link

Correctly set the paging when all data from server are returned at once #1666

Closed pponzano closed 2 years ago

pponzano commented 2 years ago

:beetle: bug report

When binding data from a request that has no pagination the number of row per page is wrong

:microscope: Minimal Reproduction

Retrieving data with no pagination on server side cause the grid to show all the data


    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      processing: true,
      serverSide: true,
      destroy: true,
      columns: [
        {
          orderable: false,
          data: null,
          defaultContent: '',
          //    className: 'details-control'
        },
        { data: 'source_id' },
        { data: 'token' },
        { data: 'name' },
        { data: 'description' },
        { data: 'destinazione' },
        { data: 'validAt' },
        { data: 'validFrom' },

        { data: 'createdBy' },
        { data: 'createdAt' },
        { data: 'modifiedBy' },
        { data: 'modifiedAt' },
        { data: 'deletedBy' },
        { data: 'deletedAt' },
        { data: 'status' },
        { data: 'supplier_id' },
        { data: 'storage_type_id' },
      ],
      rowCallback: (row: Node, data: any[] | Object, index: number) => {

        const self = this;
        $('td:first-child', row).off('click');
        $('td:first-child', row).on('click', () => {
          this.expandRow(row, data)
        });

        return row;
      },
      ajax: (dataTableParameters: any, callback) => {
        console.log(dataTableParameters)

        this.getData(callback);
      }
    };

  }

  getData(callback: any): void {
    this.suppliersSourceAPISourcesService.getAllData().subscribe(responseData => {
      this.dataItems = responseData;

      console.log(responseData);
      callback({

        recordsTotal: responseData.length,
        //recordsFiltered: 10,
        data: responseData
      });

      this.cd.detectChanges();
    });
  }

Do I have to perform the pagination myself on the datasource based on index / pagesize?

:8ball: Expected behavior

Data correctly paged

:camera: Screenshots

image

:globe_with_meridians: Your Environment

shanmukhateja commented 2 years ago

Hi,

Can you provide StackBlitz repo to investigate this?

pponzano commented 2 years ago

I'm trying to use StackBlitz but I got Cannot find namespace 'DataTables'. ...I-ve refenced [@types/datatables.net](https://stackblitz.com/examples/package/@types/datatables.net) but with no luck, what am I missing?

shanmukhateja commented 2 years ago

Hi, in that case, can you create a small GitHub repo with just enough changes to reproduce this issue? StackBlitz was meant to keep it simpler but a Git repo works too.

pponzano commented 2 years ago

resolved by myself!

shanmukhateja commented 2 years ago

@pponzano can you tell how did you resolve it?