angularjs - site - Jhipster Filter solo funciona en los datos de la página, no en toda la base de datos

jhipster official site

Question

Necesito agregar un filtro a un sitio web generado por Jhipster. El nombre de la entidad se llama "persona", que tiene rec_no, firstName, lastName, gender y Dob. Tengo alrededor de 2000 registros en la base de datos. Agregué el filtro en el archivo person.html, agregando:

<input type="text" placeholder="Rec No" ng-model="search.rec_no">
                  <input type="text" placeholder="First Name" ng-model="vm.searchFirstName">
                    <input type="text" placeholder="Last Name" ng-model="search.lastname">
                    <input type="text" placeholder="Gender" ng-model="search.sex">
                    <input type="text" placeholder="Dob" ng-model="search.dob">

Y,

 <tr ng-repeat="person in vm.people | filter:search track by person.id">

Funciona muy bien, pero el único problema es que este filtro solo funciona para los datos en la primera página (o en cualquier página en la que me encuentre actualmente). No buscará en toda la base de datos. Nunca he hecho nada en AngurlaJS o Jhipster, así que no tengo ninguna cura para solucionarlo. Creo que necesito anular la paginación actual. Investigué mucho en línea, pero no encuentro ayuda. Espero que alguien pueda ayudarme con esto. Gracias.

Aquí está el código completo,

<div>
<h2 translate="archerApp.person.home.title">People</h2>
<jhi-alert></jhi-alert>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4 no-padding-left">
            <button class="btn btn-primary" ui-sref="person.new" >
                <span class="glyphicon glyphicon-plus"></span>
                <span class="hidden-xs"  translate="archerApp.person.home.createLabel">
                    Create new Person
                </span>
            </button>
        </div>
        <div class="col-xs-8 no-padding-right">
            <form name="searchForm" class="form-inline">
                <div class="input-group pull-right" >
                    <input type="text" class="form-control" ng-model="vm.searchQuery" id="searchQuery" placeholder="{{ ''archerApp.person.home.search'' | translate }}">
                    <span  class="input-group-btn width-min" >
                        <button class="btn btn-info" ng-click="vm.search(vm.searchQuery)">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                    <span class="input-group-btn width-min" ng-if="vm.currentSearch">
                        <button class="btn btn-info" ng-click="vm.clear()">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>
<br/>
<div class="table-responsive">
    <table class="jh-table table table-striped">
        <thead>
            <tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.transition()">
                <th jh-sort-by="rec_no"><span translate="archerApp.person.rec_no">Rec No</span> <span class="glyphicon glyphicon-sort"></span></th>
                <th jh-sort-by="firstname"><span translate="archerApp.person.firstname">Firstname</span> <span class="glyphicon glyphicon-sort"></span></th>                     
                <th jh-sort-by="maidenname"><span translate="archerApp.person.maidenname">Maidenname</span> <span class="glyphicon glyphicon-sort"></span></th>
                <th jh-sort-by="lastname"><span translate="archerApp.person.lastname">Lastname</span> <span class="glyphicon glyphicon-sort"></span></th>
                <th jh-sort-by="sex"><span translate="archerApp.person.sex">Sex</span> <span class="glyphicon glyphicon-sort"></span></th>
                <th jh-sort-by="dob"><span translate="archerApp.person.dob">Dob</span> <span class="glyphicon glyphicon-sort"></span></th>                    
                <th></th>
            </tr>
            <tr>
                  <input type="text" placeholder="Rec No" ng-model="search.rec_no">
                  <input type="text" placeholder="First Name" ng-model="vm.searchFirstName">
                    <input type="text" placeholder="Last Name" ng-model="search.lastname">
                    <input type="text" placeholder="Gender" ng-model="search.sex">
                    <input type="text" placeholder="Dob" ng-model="search.dob">
            </tr> 
        </thead>
        <tbody>
            <tr ng-repeat="person in vm.people | filter:search track by person.id">                    
                <td>{{person.rec_no}}</td>
                <td><a ui-sref="person-detail({id:person.id})">{{person.firstname}}</a></td>                    
                <td>{{person.maidenname}}</td>
                <td>{{person.lastname}}</td>
                <td translate="{{''archerApp.Gender.'' + person.sex}}">{{person.sex}}</td>
                    <td>{{person.dob | date:''mediumDate''}}</td>                    
                <td class="text-right">
                    <div class="btn-group flex-btn-group-container">
                        <button type="submit"
                                ui-sref="person-detail({id:person.id})"
                                class="btn btn-info btn-sm">
                            <span class="glyphicon glyphicon-eye-open"></span>
                            <span class="hidden-xs hidden-sm" translate="entity.action.view"></span>
                        </button>
                        <button type="submit"
                                ui-sref="person.edit({id:person.id})"
                                class="btn btn-primary btn-sm">
                            <span class="glyphicon glyphicon-pencil"></span>
                            <span class="hidden-xs hidden-sm" translate="entity.action.edit"></span>
                        </button>
                        <button type="submit"
                                ui-sref="person.delete({id:person.id})"
                                class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-remove-circle"></span>
                            <span class="hidden-xs hidden-sm" translate="entity.action.delete"></span>
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="text-center">
    <jhi-item-count page="vm.page" total="vm.queryCount" items-per-page="vm.itemsPerPage"></jhi-item-count>
    <uib-pagination class="pagination-sm" total-items="vm.totalItems" ng-model="vm.page" ng-change="vm.transition()"></uib-pagination>
</div>

Answer 1

En mi humilde opinión esto no se puede resolver con solo unas pocas líneas de código.

Cuando se habla de filtrado en general, hay un filtro local y remoto . Medios locales, ya tienes tus datos completos en la memoria y filtra esos datos. Al usar Angular, esto es muy cómodo, ya que su cadena de búsqueda se compara con cada atributo almacenado en la memoria, lo que da una muy buena búsqueda. Sin embargo, este enfoque solo funciona en la página actual y solo para algunos conjuntos de datos. Si tiene más conjuntos de datos y desea filtrar su base de datos por términos específicos, debe filtrar el lado del servidor . Esto significa que al escribir en la barra de búsqueda se realiza la solicitud XHTTP a su back-end de JHipster, por lo que los datos en la memoria de su navegador ya se filtraron cuando se respondieron.

Hay más de una forma de resolverlo. Puede implementar una lógica de búsqueda personalizada dentro de repositorios JPA o habilitar elasticsearch para indexar sus datos estructurados en una base de datos de búsqueda. Este enfoque le da más poder para diseñar su lógica de filtro, pero también es más difícil.

Sugiero consultar la documentación oficial de JHipster para obtener una mejor idea de las opciones.