0

He creado mi aplicación utilizando jHipster. En las tablas, he conseguido añadir la paginación y la ordenación, pero también me gustaría añadir un campo de búsqueda en una columna, algo como esto http://ng-table.com/ ¿Sabéis si hay algún atributo de estas tablas que permitan hacerlo, o alguna otra forma?

Mi HTML es este:

<div class="table-responsive" *ngIf="entities">

<table class="table table-striped">
    <thead>
    <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
    <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <span class="fa fa-sort"></span></th>
    <th jhiSortBy="nombre"><span jhiTranslate="app.entity.name">Name</span> <span class="fa fa-sort"></span></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let entity of entities ;trackBy: trackId">
        <td><a [routerLink]="['../entity', entity.id ]">{{entity.id}}</a></td>
        <td>{{entity.name}}</td>                               
    </tr>
    </tbody>
</table>

Gracias

2 respuestas 2

0

Puedes utilizar el atributo 'pureFilter' de angular, usando también una entrada de texto para el filtro, sería algo como esto:

<input type="text" [(ngModel)]="filter" class="form-control">

<table> 
......
<tr *ngFor="let entity of (entities | pureFilter:filter:'name')>
.......

En 'pureFilter' tienes que poner 'pureFilter:[El Nombre del filtro]:[El atributo de la entidad sobre el que filtrar]'

0

Puedes hacer los siguiente:

En el componente, puedes poner los siguiente:

loadAll(idUser) {
this.userService
  .getAllVoterParent({
    page: this.page - 1,
    size: this.itemsPerPage,
    sort: this.sort(),
    idCandidate: idUser,
    q: this.search !== undefined ? this.search : ''
  })
  .subscribe((res: HttpResponse<User[]>) => this.onSuccess(res.body, res.headers), (res: HttpResponse<any>) => this.onError(res.body));


 }

donde q es el criterio de busqueda.

En el servicio:

getAllVoterParent(req?: any): Observable<HttpResponse<IUser[]>> {
const options = createRequestOption(req);
options.set('idCandidate', req.idCandidate);
options.set('q', req.q);
return this.http.get<IUser[]>(`${this.resourceUrl}/get-all-voters`, { params: options, observe: 'response' });


 }

ya en el controller:

  @GetMapping(value = "/users/get-all-voters", params = {"idCandidate"})
@PreAuthorize("hasRole(\"" + AuthoritiesConstants.ADMIN + "\") or hasRole(\"" + AuthoritiesConstants.CANDIDATO + "\")")
public ResponseEntity<List<UserDTO>> getAllVotersByCandidate(@RequestParam MultiValueMap<String, String> queryParams,
                                                             UriComponentsBuilder uriBuilder,
                                                             Pageable pageable,
                                                             @RequestParam(value = "idCandidate") Long idCandidate,
                                                             @RequestParam(value = "q", defaultValue = "") String q) {

    log.debug("REST request to get all voters by candidate: {}", idCandidate);
    final Page<UserDTO> page = userService.getAllVoterByParent(idCandidate, q, pageable);
    HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(uriBuilder.queryParams(queryParams), page);
    return new ResponseEntity<>(page.getContent(), headers, HttpStatus.OK);

por ultimo en el Repositorio:

@Query(value = "SELECT v FROM User c" +
    " INNER JOIN User l ON  c.id = l.parent" +
    " INNER JOIN User v ON l.id = v.parent WHERE c.id = :idCandidate " +
    " AND (LOWER(v.firstName) LIKE  concat('%',:q,'%') OR LOWER(v.lastName) LIKE concat('%',:q,'%')" +
    " OR v.numDocument LIKE  concat('%',:q,'%'))")
Page<User> getAllVotersByCandidate(@Param("idCandidate") Long idCandidate, @Param("q") String q, Pageable pageable);

@Query es un ejemplo, ahi puedes poner la consulta que se ajuste a tus necesidades

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.