单击下一页时从数据库加载数据到 mat-table

Question

我正在使用 angular 7 和 spring 引导，并且我正在使用 mat-table，我不想一次加载数据库中的所有数据，我想在点击mat-table中的下一页时加载数据。 这张图片用于我的垫子-table.

如何在 angular 7 和 spring 一起启动，如果有人有解决方案请给我，谢谢。

Answer 1

在 Spring-data-jpa 的 JpaRepository 中有一个 Pageable 概念，在你的 repo 实现中 JpaRepository 而不是 CrudRepository （它在内部扩展 PagingAndSortingRepository)

你可以这样做，

回购

public class FooRepository extends JpaRepository<FooClass, Long> {
}

服务

@Service
public class FooService {

  @Autowired
  private FooRepository fooRepo;

  public Page<FooClass> fetchPagedFoo(Integer page, Integer size) {
   return fooRepo.findAll(PageRequest.of(page, size)); 
  }
}

控制器

@RestController
public class FooController {

    @Autowired
    private FooService fooService;

    @GetMapping("/foo")
    public ResponseEntity getPagedFoo(
            @RequestParam(value = "pageIndex", defaultValue ="0") Integer page,
            @RequestParam(value = "size", defaultValue = "10") Integer size) {
        return ResponseEntity.ok(fooService.fetchPagedFoo(page, size));
    }
}

在上面，如果你传递 0、10，那么第一页 10 行将被 returned，Page 将 return 数据总数以及你可以这样做 Pagination.