AngularJS数据表显示表

时间:2015-06-30 22:28:31

标签: javascript jquery angularjs datatables

好的,所以我是AngularJS的新手,但不是新编码。在大多数情况下,我已经了解了Angular的所有内容,但是过去几天我一直困在一件事上,我一直在拔头发。希望你们其中一个能告诉我自己做错了什么。

我正在使用AngularJS和Jquery Datatables。从控制器加载的数据很好甚至将它显示为一行但是它在Jquery Box上方...在Jquery Box内部它告诉我“没有数据可用”它也表示显示0到0的0条目,即使是1行应该出现。

以下是表格的HTML外观:

<table ng-if="ConductorTypes" class="table table-striped table-hover" datatable-setup id="ConductorTypes" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="conductorType in ConductorTypes">
                        <td>
                            {{ conductorType.id }}
                        </td>
                        <td>
                            {{ conductorType.name }}
                        </td>
                        <td></td>
                    </tr>
                </tbody>
</table>

我的控制器看起来像这样:

'use strict';
app.controller('ConductorTypesController', ['$scope', 'stagingService', function ($scope, stagingService) {

    $scope.ConductorTypes = [];

    stagingService.getConductorTypes().then(function (results) {

        $scope.ConductorTypes = results.data;

    }, function (error) {
        alert(error.data.message);
    });

}]);

现在我也设置了指令,看起来像这样:

app.directive('datatableSetup', function () {
        return {
            restrict: 'E, A, C',
            link: function (scope, element, attrs) {
                var table = element.dataTable({
                    "aoColumnDefs": [{
                        'bSortable': true,
                        'aTargets': [-1]
                    }],
                    "oLanguage": {
                        "oPaginate": {
                            "sPrevious": "Previous",
                            "sNext": "Next"
                        }
                    },
                    "iDisplayLength": 10,
                    "aLengthMenu": [
                      [5, 10, 25, 50, -1],
                      [5, 10, 25, 50, "All"]
                    ],
                    "sDom": '<"dt-panelmenu testbutton"><"dt-panelmenu clearfix"Tfr>t<"dt-panelfooter clearfix"ip>',
                    "oTableTools": {
                        "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
                    }
                });
            }
        }
    }
);

我做错了什么?为什么这不会填充Jquery Datatable。任何帮助我都会非常感激。

1 个答案:

答案 0 :(得分:0)

由于@Kevin F给了我加载后加载它的想法,我最后添加了一个超时。