akveo / ng2-smart-table

Angular Smart Data Table component
https://akveo.github.io/ng2-smart-table/
MIT License
1.63k stars 878 forks source link

How can I get the index of current page #1332

Open SkanderLassoued09 opened 2 years ago

SkanderLassoued09 commented 2 years ago

I'm working with ng2-smart table so I want to get the index of current page that helps me to optimize my application by sending the index to my service to get only limited number of data , when user press next index will get next limited number of data I'M STUCK SINCE 2 MONTHS PLEASE ANY CAN HELP ME OR GIVE ME ANOTHER SOLUTION I WOULD BE GRATFULE

vladimirpetukhov commented 5 months ago

Yes, you can get but it is very strange. You can access every column that is a part of server response data by instance. I use this custom button component. If you make console data in onComponentInitFunction(instance) you will see that instance contains rowData property where are all data from current row

export const departmentTableConfig = {
  ...DefaultTableFunctionsService.defaultTableConfig,
  columns: {
    _id: {
      title: 'Номер',
      type: 'number',
      sort: false,
      visible: false,
    },
    name: {
      title: 'Име',
      type: 'string',
      sort: true,
    },
    employees: {
      title: 'Служители',
      type: 'custom',
      renderComponent: EmployeeReportingButtonComponent,
      onComponentInitFunction(instance) {

      },
    },
    activities: {
      title: 'Дейности',
      type: 'custom',
      renderComponent: ActivityReportingButtonComponent,
      style: 'display: flex !important;',
      onComponentInitFunction(instance) {

      },
    },
  },
  pager: {
    display: true,
    perPage: perPage,
  },
};`

`import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'ngx-report-button',
  template: '<button nbButton outline (click)="handleClick()">Отчитане дейности</button>',
})
export class ActivityReportingButtonComponent implements OnInit {
  @Input() rowData: any;
  @Output() confirm: EventEmitter<any> = new EventEmitter();
  id: number;
  route: string = 'reporting/activities';

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    if (this.rowData) {
      this.id = this.rowData.id;
    } else {
      console.error('No row data available');
    }
  }

  handleClick() {
    if (window.confirm('Are you sure you want to perform this action?')) {
      if (this.id) {
        this.confirm.emit(this.id);
        console.log(this.router.getCurrentNavigation());
        this.router.navigate([`../activities/${this.id}/report`], { relativeTo: this.activatedRoute });
      } else {
        console.error('Unexpected event data: ID is missing.');
      }
    } else {
      this.confirm.emit(null);
    }
  }
}