2017-12-29 16 views
0

私はページングでデータを正しく表示できる角度スマートテーブルを使用しています。 新しいレコードを追加する/同じページに既存のレコードを更新する。ここに参照用のスクリーンショットがあります - smart-table & the form しかし、ここでは、新しいレコードを追加/既存のものを更新した後のページネーションの問題に直面しています。つまり、オブジェクトのリフレッシュにはです。ページネーションは考慮されず、すべてのレコードが同じページに一度に表示されます。角スマートテーブル - データオブジェクトをリフレッシュするときにページネーションが機能しない

$scope.smartTablePageSize = 10; 
$scope.rowsPerPage = [5, 10, 15, 20, 25]; 

// my function to add a new record 
vm.insertAccount = function() { 
    if(vm.validateAll()) 
     $http({ 
      method: 'POST', 
      url: addAccountUrl, 
      data: vm.accountInfo, 
      headers: { 'Content-Type': 'application/json' } 
     }).then(function(success) { 
      vm.getAllAccountsData(); // refreshing data object 
     }, function(error) { 
     }); 
} 

// function to refresh data object 
vm.getAllAccountsData = function() { 
    $http.get(accountListUrl) 
     .then(function(success) { 
      if (success.data) { 
       vm.allAccountsData = success.data; // updating data here 
      } 
     }, function(error) { 

     }) 
} 

そして、それぞれのHTML - -

<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div class="col-xs-12 form-inline form-group mt-20"> 
     <label for="rows">Rows on page</label> 
     <select class="form-control show-tick" id="rows" title="Rows on page" selectpicker ng-model="smartTablePageSize" ng-options="i for i in rowsPerPage"> 
     </select> 
    </div> 
    <table class="table mt-20 mb-20" ng-if="vm.allAccountsData.length > 0" st-table="vm.allAccountsData"> 
     <thead class="sortable"> 
      <tr> 
       <th class="table-id" st-sort="id" st-sort-default="true">#</th> 
       <th st-sort="accounttype">Account Type</th> 
       <th st-sort="vendor">Vendor</th> 
       <th st-sort="accountnumber">Account No.</th> 
       <th st-sort="paymentmode">Payment Mode</th> 
       <th st-sort="ponumber">PO No.</th> 
       <th st-sort="vendorcode">Vendor Code</th> 
       <th st-sort="costcenter">Cost Center</th> 
       <th st-sort="glcode">GL Code</th> 
       <th>Action</th> 
      </tr> 
      <tr> 
       <th></th> 
       <th> 
        <input st-search="accounttype" placeholder="Search Account Type" class="input-sm form-control search-input" type="search" /> 
       </th> 
       <th> 
        <input st-search="vendor" placeholder="Search Vendor" class="input-sm form-control search-input" type="search" /> 
       </th> 
       <th> 
        <input st-search="accountnumber" placeholder="Search Account No." class="input-sm form-control search-input" type="search" /> 
       </th> 
       <th> 
        <input st-search="paymentmode" placeholder="Search Payment Mode" class="input-sm form-control search-input" type="search" /> 
       </th> 
       <th> 
        <input st-search="ponumber" placeholder="Search PO No." class="input-sm form-control search-input" type="search" /> 
       </th> 
       <th> 
        <input st-search="vendorcode" placeholder="Search Vendor Code" class="input-sm form-control search-input" type="search" /> 
       </th> 
       <th> 
        <input st-search="costcenter" placeholder="Search Cost Center" class="input-sm form-control search-input" type="search" /> 
       </th> 
       <th> 
        <input st-search="glcode" placeholder="Search GL Code" class="input-sm form-control search-input" type="search" /> 
       </th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="item in vm.allAccountsData"> 
       <td class="table-id">{{item.index + 1}}</td> 
       <td>{{item.accounttype}}</td> 
       <td>{{item.vendor}}</td> 
       <td>{{item.accountnumber}}</td> 
       <td>{{item.paymentmode}}</td> 
       <td>{{item.ponumber}}</td> 
       <td>{{item.vendorcode}}</td> 
       <td>{{item.costcenter}}</td> 
       <td>{{item.glcode}}</td> 
       <td> 
        <button class="btn btn-info editable-table-button btn-xs" ng-click="vm.editAccount(item);">View/Edit</button> 
        <button class="btn btn-danger editable-table-button btn-xs" ng-click="vm.confirmDeleteAccountModal('app/pages/utilities/pdfNormalizer/confirm-delete-account.html', 'sm', item)">Delete</button> 
       </td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="10" class="text-center"> 
        <div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="10"></div> 
       </td> 
      </tr> 
     </tfoot> 
    </table> 
</div> 

だから、私はを期待して何さわやかなオブジェクト類似した表である。ここ

は私のコントローラのコードです上に示したようなページ設定を使用してください。そしては、私はページネーションを考慮せずに、すべてのレコードを持つテーブルで取得していますどのような -This is what I get

答えて

0

私は少し苦労して答えを見つけました! 角スマートテーブルst-safe-src指令を使用することができます。

私はとしてそれを使用 - allAccountsDataは、一時的なデータオブジェクト& vm.allAccountsDataが実際のものである場合には、

<table class="table mt-20 mb-20" st-table="allAccountsData" st-safe-src="vm.allAccountsData"> 

。それだけです

<tr ng-repeat="item in allAccountsData"> 

-

その後、私はとallAccountsDataにわたり反復しました!コントローラコードに変更はありません!

関連する問題