Jhipster Filter only works on the data on the page, not the entire database

Question

I need to add a filter to a Jhipster generated website. The entity name is called "person", which has rec_no, firstName, lastName, gender and Dob. I have around 2000 records in the database. I added the filter in the person.html file, by adding:

<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">

And,

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

It works great, but the only problem is this filter only works for the data on the first page (or whatever page I am currently on). It won't search the entire database. I have never done anything in AngurlaJS or Jhipster, so I have totally no cure how to fix it. I guess I need to override the defualt pagination. I did a lot research online, but can't find any help. I hope anyone can help me out of this. Thank you.

Here is the full code,

<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

IMHO this is not solvable with just a few lines of code.

When talking about filtering in general, there is local and remote filtering. Local means, you got your full data already in memory and filter that data. When using Angular, this is very much comfortable, as your search string is compared to every attribute stored in memory, which gives a pretty good search. However, this approachs works only on the current page and only for a few data sets. If you got more data sets, and?or want to filter your database by specific terms, you must filter server side . This means typing in the searchbar performs XHTTP request to your JHipster backend, so the data in your browsers memory is already filtered when responded.

There is more than one way to solve it. You either can implement custom search logic inside JPA repositories, or enable elasticsearch for indexing your structured data into a search Database. This approach gives you more power to design your filter logic, but is also more difficult.

I suggest to check the official JHipster documentation to get a better picture of the options.