Jhipsterフィルタは、データベース全体ではなく、ページ上のデータに対してのみ機能します。

Question

Jhipsterによって生成されたWebサイトにフィルタを追加する必要があります。エンティティ名は「人」と呼ばれ、rec_no、firstName、lastName、gender、およびDobを持ちます。私は約2000のレコードをデータベースに持っています。それは素晴らしい作品が、唯一の問題は、このフィルタでのみ最初のページのデータのために働く

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

を：私は追加することにより、person.htmlファイルにフィルタを追加しました（または私が現在行っているページ）。データベース全体を検索することはありません。私はAngurlaJSやJhipsterで何もしたことがないので、それを修正する方法は全くありません。私は、デファクト・ページネーションを無効にする必要があると思います。私はオンラインで多くの研究をしましたが、助けを見つけることはできません。私は誰もこれから私を助けることができることを願っています。ありがとうございました。ここで

は私見、これはわずか数行のコードで解くことができないです

<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を使用することもできます。この方法では、フィルタロジックを設計する力が増しますが、さらに難しくなります。

私は、official JHipster documentationを確認して、より良いオプションの写真を得ることをお勧めします。