Jhipster Filter仅适用于页面上的数据，而不适用于整个数据库

Question

我需要为Jhipster生成的网站添加一个过滤器。 实体名称称为“person”，它具有rec_no，firstName，lastName，gender和Dob。 我在数据库中有大约2000条记录。 我在person.html文件中添加了过滤器，添加：

<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 ng-repeat="person in vm.people | filter:search track by person.id">

它工作得很好，但唯一的问题是这个过滤器只适用于第一页上的数据（或我当前所在的任何页面）。 它不会搜索整个数据库。 我从未在AngurlaJS或Jhipster做过任何事情，所以我完全没有办法解决它的问题。 我想我需要覆盖defualt分页。 我在网上做了很多研究，但找不到任何帮助。 我希望任何人都可以帮助我。 谢谢。

这是完整的代码，

<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

恕我直言，只用几行代码就无法解决这个问题。

在谈到一般的过滤时，有本地和远程过滤。 本地意味着，您已将完整数据存储在内存中并过滤该数据。 使用Angular时，这非常舒服，因为您的搜索字符串与存储在内存中的每个属性进行比较，这提供了相当不错的搜索。 但是，此方法仅适用于当前页面，仅适用于少数数据集。 如果您有更多数据集，并且？或者想要按特定术语过滤数据库，则必须过滤服务器端 。 这意味着键入搜索栏会对JHipster后端执行XHTTP请求，因此浏览器内存中的数据在响应时已经过滤。

解决它的方法不止一种。 您可以在JPA存储库中实现自定义搜索逻辑，也可以启用elasticsearch将结构化数据索引到搜索数据库中。 这种方法为您提供了设计滤波器逻辑的更多功能，但也更加困难。

我建议查看官方的JHipster文档 ，以更好地了解选项。