数据表的角度方式与$http带来了数据

Datatables the angular way with $http brought data

本文关键字：http 来了 数据 方式 数据表      更新时间：2023-09-26

所以我正在开发一个 AngularJS 应用程序，我需要使用 $http 服务从服务器获取数据，如下所示：

$http({
    method: 'GET',
    url: $rootScope.apiURL + 'getAllClientLocations/' + session,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (response) {
    if (response.ErrorMessage === null && response.Result !== null) {
        $scope.locations = Object.keys(response.Result).map(function (key) {
            return response.Result[key]
        });
    }
});

我正在尝试使用角度数据表显示这些数据。数据显示良好，我得到了数据表控件（分页、按钮、搜索框），但它们都不起作用，我得到了"表中没有可用数据"图例。

这是我的 html 设置：

                <table class="table table-striped table-bordered table-hover" datatable="ng" dt-options="dtOptions">
                    <thead>
                    <tr>
                        <th>{{ 'BRANCH' | translate }}</th>
                        <th>{{ 'NAME' | translate }}</th>
                        <th>{{ 'STATUS' | translate }}</th>
                        <th>{{ 'ACTIONS' | translate }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="station in stations">
                        <td>{{ station.LocationName }}</td>
                        <td>{{ station.StationName }}</td>
                        <td>{{ station.StationStatus }}</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-xs" ng-click="editStation(station.CliLocationSalesStationId)" ng-stow="action.edit">Update</button>
                            <button type="button" class="btn btn-success btn-xs" ng-if="!station.HardwareFingerprint" ng-click="authorizeStation(station.CliLocationSalesStationId)" ng-stow="action.edit">Authorize</button>
                            <button type="button" class="btn btn-success btn-xs" ng-if="station.HardwareFingerprint" ng-click="deauthorizeStation(station.CliLocationSalesStationId)" ng-stow="action.edit">Deauthorize</button>
                        </td>
                    </tr>
                    </tbody>
                </table>

这些是我的dtOptions：

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withDOM('frtip')
    .withButtons([
        'copy',
        'print',
        'excel'
    ]);

我知道由于异步而存在某种问题，DOM 是在我从服务器获取数据之前构建的。有没有办法告诉我数据表在我从服务器成功获取数据后呈现？

您可以

按如下方式使用fromFnPromise(promiseFn)：

//reference $q in your controller as service
//e.x anuglar.module("app",[]).controller($q,$scope..)

function getPromiseData()
{
    var deferred = $q.defer();
    $http({
        method: 'GET',
        url: $rootScope.apiURL + 'getAllClientLocations/' + session,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).success(function (response)
    {
      if (response.ErrorMessage === null && response.Result !== null)
      {
        $scope.locations = Object.keys(response.Result).map(function (key)
        {
            deferred.resolve(response.Result[key]);
        });
      }
      else
      {
         deferred.resolve("");
      }
    });
  return deferred.promise;
}

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function ()
     {
         return getPromiseData();
     })
    .withPaginationType('full_numbers')
    .withDOM('frtip')
    .withButtons([
        'copy',
        'print',
        'excel'
    ]);
相关文章：