У меня есть умная таблица Angular.js, где источником данных является вызов Ajax с использованием $ resource. Я использовал st-pipe, чтобы указать функцию ajax, и я использую st-safe-src.
При инициализации интеллектуальная таблица завершает запрос ajax и загружает таблицу.
Пока все хорошо, но ...
У меня две проблемы ...
1 - Мой столбец сортировки по умолчанию не применяется при начальной загрузке.
2 - Я обнаружил, что каждый раз, когда я пытаюсь отсортировать данные, щелкая заголовок столбца, интеллектуальные таблицы запускают новый вызов Ajax для повторного получения исходных данных.
Я надеялся, что умные таблицы смогут сортировать на стороне клиента и, следовательно, не будут выполнять вызов 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>
Благодарность