Pagination, Search don't work after importing custom in


Topic: Pagination, Search don't work after importing custom interface to Table

bbxerox asked 6 years ago

Hello guys. I have a problem.

I created new interface User, who have id, name and surname. I get data from API and save it to array of users (User[]). I can show these data in table, but i can not configure search and pagination to work with this user array...

Someone know how to do that? Or is there any documentation on that?


Arkadiusz Idzikowski staff answered 6 years ago

Hello,

Could you provide more details about the problem? You can find an example of table with search and pagination in our documentation:

https://mdbootstrap.com/docs/angular/tables/datatables/


bbxerox answered 6 years ago

I used this example:https://blog.florimondmanca.com/consuming-apis-in-angular-the-model-adapter-pattern

//user.model.ts
export class User {
  constructor(
  public id: string,
  public username: string,
  public password: string,
  ) { }
}
export class UserAdapter implements Adapter<User> {

  adapt(item: any): User {
    return new User(
      item.id,
      item.username,
      item.password,
    );
  }
}

//user.component.ts
import { User } from './../../_interfaces/user.model';
export class UsersComponent implements OnInit {

  users: User[];

headElements = ['ID', 'Username', 'Password'];

  constructor(private userService: UserService) {
    this.users = [];
  }

  ngOnInit() {
    this.userService.list().subscribe((users: User[]) => {
      this.users = users;
    });
  }
}

//user.service.ts
export class UserService {

  constructor(private http: HttpClient, private adapter: UserAdapter) { }

  list(): Observable<User[]> {
    const url = 'http://localhost:4548/api/v1/users';
    return this.http.get(url).pipe(
      // Adapt each item in the raw data array
      map((data: any[]) => data.map(item => this.adapter.adapt(item))),
    );
  }
}

So this is how I get my users. If i try and implement search and pagination it is not working...


Arkadiusz Idzikowski staff answered 6 years ago

Could you provide the html and ts code of the table or send a demo to a.idzikowski@mdbootstrap.com? We need to check if the code of our component is used correctly in your project, without this code I won't be able to help you.

Are there any errors in the console when you try to use search or pagination?

Also please try the code from our documentation and let me know if that works for you. The only change you need to make is to pass data from your service to the 'setDataSource' method.

https://mdbootstrap.com/docs/angular/tables/datatables/


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.3
  • Device: Computer
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No