在尝试对智能 table 进行排序时会触发一个新的 ajax 调用

Question

我有一个 Angular.js 智能 table，其中数据源是使用 $resource 的 Ajax 调用。我使用 st-pipe 来指定 ajax 函数，我正在使用 st-safe-src.

在初始化时，智能 table 完成 ajax 请求并加载 table。

到目前为止还不错但是...

我有两个问题...

1 - 我的默认排序列未应用于初始加载。

2 - 我发现每次我尝试通过单击列 header 对数据进行排序时，智能 tables 都会触发新的 Ajax 调用以检索源数据再次。

我希望聪明的 tables 能够对客户端进行排序，因此不必为排序调用 ajax。我相信这就是 st-safe-src 的用途。我错了吗？

感谢有人可以帮助我。

谢谢

这是我的控制器...

eposWebAngularStrutsApp.controller('StoreHealthCheckController', ['StoreServerHealth', function (StoreServerHealth) {
    var ctrl = this;
    this.rowCollection = []; // base collection
    this.displayedCollection = [];  // displayed collection

    this.callServer = function callServer(tableState) { 
        ctrl.isLoading = true;
        StoreServerHealth.query(function(result) {          
            ctrl.rowCollection = result;
            ctrl.displayedCollection = [].concat(ctrl.rowCollection);
            ctrl.isLoading = false;
          })
          .error(function () {
              ctrl.errorMsg = "An Error has occured while loading posts!";

         });
    };  
}]);

这是我的模板...

<div class="table-container" ng-controller="StoreHealthCheckController as mc">
<table st-table="mc.displayedCollection" st-safe-src="mc.rowCollection" st-pipe="mc.callServer" class="table table-striped ng-isolate-scope">
    <thead>
    <tr>
        <th st-sort-default="true" st-sort="locationId">Store</th>
        <th>Server</th>
        <th>Conn Status</th>
        <th>Last Updated</th>
        <th>MDI</th>
        <th>Last Synched (MDI)</th>
        <th>DSM</th>
        <th>Last Synched (DSM)</th>
        <th>Trading Status</th>
        <th>Build</th>
    </tr>
    </thead>
    <tbody ng-show="mc.isLoading">
    <tr>
        <td colspan="10" class="text-center">Loading ... </td>
    </tr>   
    </tbody>    
    <tbody ng-show="!mc.isLoading">
    <tr ng-repeat="row in mc.displayedCollection">
        <td>{{row.locationId}}</td>
        <td>{{row.clientId | clientIdToStoreServerType}}</td>
        <td>
            <img ng-src="img/{{row.status | statusToTrafficLightImage}}.png" alt="{{row.status}}"/>
        </td>
        <td>{{row.lastUpdateTime | date:'dd-MM-yyyy hh:mm:ss'}}</td>
        <td><img ng-src="img/{{row.replicationStatus | statusToTrafficLightImage}}.png" alt="{{row.replicationStatus}}"/></td>
        <td>{{row.lastReplicationSyncTime | date:'dd-MM-yyyy hh:mm:ss'}}</td>
        <td><img ng-src="img/{{row.dsmReplicationStatus | statusToTrafficLightImage}}.png" alt="{{row.dsmReplicationStatus}}"/></td>
        <td>{{row.dsmLastSynchTime | date:'dd-MM-yyyy hh:mm:ss' }}</td>
        <td>{{row.storeTradingStatus | tradingStatusCodeToTradingStatus}}</td>
        <td>{{row.buildVersion}}</td>
        <td>
            <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary">
                <i class="fa fa-bolt"></i>              
            </button>
            <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary">
                <i class="fa fa-desktop"></i>
            </button>
            <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary">
                <i class="fa fa-server"></i>
            </button>
            <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-primary">
                <i class="fa fa-info-circle"></i>               
            </button>                                   
        </td>           
    </tr>
    </tbody>
</table>
</div>

谢谢

Answer 1

我通过从我的 table 定义中取出 st-pipe 并如下更改我的控制器来解决这个问题...

eposWebAngularStrutsApp.controller('StoreHealthCheckController', ['StoreServerHealth', function (StoreServerHealth) {

    var ctrl = this;
    ctrl.rows = [];
    ctrl.displayedRows = [];

    ctrl.isLoading = true;
    StoreServerHealth.query(function(result) {          
        console.log(result);
        ctrl.rows = result;
        ctrl.displayedRows = [].concat(ctrl.rows);
        ctrl.isLoading = false;
    });  


}]);

所以结论是我不知道 st-pipe 是干什么用的。

在尝试对智能 table 进行排序时会触发一个新的 ajax 调用

On attempting to sort smart table fires a new ajax call

angularjs

smart-table