javascript - Controller 使用 Angular js 将数据填充到数据表中

Question

我想将数据填充到数据表中，但没有数据填充到表中。

我在调试时遇到的错误是:

• Uncaught TypeError: Cannot read property 'getContext' of null

html:

<table class="display table table-bordered table-striped" id="example">
                                        <thead>
                                            <tr>
                                                <th>User Name</th>
                                                <th>Email Id</th>
                                                <th>Group Name</th>
                                                <th>Created Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                             <tr ng-repeat="item in items">
                                                <td>{{item.user}}</td>
                                                <td>{{item.email}}</td>
                                                 <td>{{item.groupName}}</td>
                                                 <td>{{item.createdAt}}</td>
                                            </tr>
                                        </tbody>
                                    </table> 

Controller :

(function () {
    "use strict";
angular.module('app').controller('superAdminController', function ($scope, AuthenticationService, $timeout, $location, $http, myConfig) {

    AuthenticationService.loadSuperAdmin(function (response) {
        if (response.data.success) {
                $scope.populateTable(response.data);
            console.log(response.data);
        } else {
            $scope.items = [];
        }
    });

    $scope.populateTable = function (data) {
        $scope.items = data.loadSuperAdminData;
        $timeout(function () {
            $("#example").dataTable();
        }, 200)
    };
});
    }());

Answer 1

在 Controller 中，您可以像这样填充服务器响应。

$.post(MY_CONSTANT.url + '/api_name',{
    access_token: accessToken
}).then(
    function(data) {
        var dataArray = [];
        data = JSON.parse(data);
        var lst = data.list;

        lst.forEach(function (column){

        var d = {user: "", email: "", group: "", created: ""};
            d.user = column.user;
            d.email = column.email;
            d.groupName = column.group;
            d.createdAt = column.created;
            dataArray.push(d);
        });
        $scope.$apply(function () {
            $scope.list = dataArray;

            // Define global instance we'll use to destroy later
            var dtInstance;

            $timeout(function () {
                if (!$.fn.dataTable) return;
                dtInstance = $('#datatable4').dataTable({
                    'paging': true,  // Table pagination
                    'ordering': true,  // Column ordering
                    'info': true,  // Bottom left status text
                    // Text translation options
                    // Note the required keywords between underscores (e.g _MENU_)
                    oLanguage: {
                        sSearch: 'Search all columns:',
                        sLengthMenu: '_MENU_ records per page',
                        info: 'Showing page _PAGE_ of _PAGES_',
                        zeroRecords: 'Nothing found - sorry',
                        infoEmpty: 'No records available',
                        infoFiltered: '(filtered from _MAX_ total records)'
                    }
                });
                var inputSearchClass = 'datatable_input_col_search';
                var columnInputs = $('tfoot .' + inputSearchClass);

                // On input keyup trigger filtering
                columnInputs
                    .keyup(function () {
                        dtInstance.fnFilter(this.value, columnInputs.index(this));
                    });
            });

            // When scope is destroyed we unload all DT instances
            // Also ColVis requires special attention since it attaches
            // elements to body and will not be removed after unload DT
            $scope.$on('$destroy', function () {
                dtInstance.fnDestroy();
                $('[class*=ColVis]').remove();
            });
        });
    });