i have a spring boot angular application already implemented ,i’m trying to implement a pagination within the project ,eveyrthing works fine except the fact that the data fetched to client side is not sorted properly ,for example i find data starts with id number 10 ,11 .. then unexpectedly jumps to id number 15 ,i also find id number 1 in page number 5 and so on ..

you can find images below illustrating my problem (sorry for deleting the rows ,it’s confidential plus we only have interest in the id column)

problem 2 : let’s say i updated the record of id =10, after saving the updates ,the record with id 10 dissapears from page 1 and get displayed in page 4 (for example)

i really can’t find a solution to this strange behavior

you can find also the project’s code : spring boot :

Repository:

public interface ServiceTypeRepository extends JpaRepository<ServiceType, Long>

    Page<ServiceType> findAll(Pageable pageable);
}

Service:

public Page<ServiceType> getServiceTypes(Pageable pageable) {
        return ServiceTypeRepository.findAll(pageable);

Resource(controller):

@ApiResponse(responseCode = "401", description = "Unauthorized")
    @GetMapping(produces = MediaType.APPLICATION_JSON_VALUE)
    @PreAuthorize(AccessRightConstants.SERVICETYPE_READ_PERMISSION)
    public ResponseEntity<List<ServiceTypeV2DTO>> get(Pageable pageable) { //  @RequestParam(defaultValue = "1") int page @RequestParam(defaultValue = "10") int size
        log.debug("REST request to get service types");
        // Pageable paging = PageRequest.of(page, size);
        Page<ServiceType> serviceTypes = ServiceTypeServiceV2.getServiceTypes(pageable);

        List<ServiceTypeV2DTO> serviceTypeV2DTOS = serviceTypes.stream()
                .sorted(Comparator.comparingInt(ServiceType::getNumericId))
                .map(DtoFactory::createServiceTypeV2DTO)
                .toList();

        return ResponseEntity.ok(serviceTypeV2DTOS);

angular app : (angular 17) :

Service methods :

 GetAll(params): Observable<any[]>{
        return this.httpClient.get<any[]>(`${this.SERVICE_TYPE_CONTEXT}`,{params});
    }

Update(ServiceDtoToSave : any): Observable<ServiceType>{
    let servTypeServiceDtoToSave: ServiceType = this.mapObjectToSave(ServiceDtoToSave);
        return this.httpClient.put<ServiceType>(`${(this.SERVICE_TYPE_CONTEXT)}` , servTypeServiceDtoToSave);
}

mapObjectToSave(serviceTypeDto: any): ServiceType{
        let ServiceDtoToSave : ServiceType = new ServiceType();
        serviceTypeDto.value? ServiceDtoToSave.value = serviceTypeDto.value:null;
        ServiceDtoToSave.name = serviceTypeDto.name;
        ServiceDtoToSave.minF = serviceTypeDto.minFwVersion;
         ServiceDtoToSave.compat = serviceTypeDto.compat;
        ServiceDtoToSave.compat2 = serviceTypeDto.compat2;
        ServiceDtoToSave.compat3 = serviceTypeDto.compat3;
        ServiceDtoToSave.compat4= serviceTypeDto.compat4;
        ServiceDtoToSave.attributesService = [];
        ServiceDtoToSave?.attributesService.forEach(attribute=> {
            ServiceDtoToSave.attributesService.push({
                name : attribute.name,
                value : attribute.value
            })});

        return ServiceDtoToSave;
    }

component.ts:

//declaration

   page: number = 1;
    pageSize: number = 26;
    name = '';



   totalItems: number = 256;

    serviceTypeForm: FormGroup
    editmode = false;
    serviceType: ServiceType [];
    selectedService: ServiceType; 

//methods

 loadServicesV2(){
        const params = this.getRequestParams(this.page, this.pageSize);
    this.serviceTypeV2.GetAll(params)
        .subscribe({
            next: (result: ServiceType[]) => {

               this.serviceType = result;
                this.serviceType = result.sort((a, b) => a.value - b.value);
                console.log(result);


             // this.totalItems = parseInt(result.headers.get('x-total-count'));
            },
            error: (e) => console.error(e)
        });


}

    editSaveServices() {
        this.editServiceType();
        this.formToSelectedService();

        this.serviceTypeService.update(this.selectedService, (result: ServiceType[]) => {

            this.loadServicesV2();

        })
}

  changePage($event) {
        this.page = $event;
        this.loadServicesV2();
    }

html:

 <div class="d-flex justify-content-center">
                        <ngb-pagination (pageChange)="changePage($event)" [(page)]="page" [boundaryLinks]="true"
                                        [collectionSize]="totalItems"  [ellipses]="true" [maxSize]="10"
                                        [pageSize]=pageSize></ngb-pagination>
                    </div>

enter image description here
enter image description here

this.serviceType = result.sort((a, b) => a.value – b.value);

notice that i tried to sort data by id in order to solve the error but the list still starts with id 10, you can find id number 1 in page 4 (see second image)

sorry once again for the lack of resources, i hope that i provided the code in an understandable way