угловые таблицы данных не отображаются должным образом

я пытаюсь использовать angular datatables с моим проектом angular js, но кажется, что что-то упускается, может кто-нибудь, пожалуйста, помогите мне

ссылки: -

 <script src="~/Scripts/angular.min.js"></script>
    @*<script src="~/Scripts/angular-route.min.js"></script>*@
    <script src="~/Scripts/angular-resource.min.js"></script>

    <script src="~/widget/angular-datatables/angular-translate.min.js"></script>
    <script src="~/widget/angular-datatables/angular-datatables.util.js"></script>
    <script src="~/widget/angular-datatables/angular-datatables.factory.js"></script>
    <script src="~/widget/angular-datatables/angular-datatables.options.js"></script>
    <script src="~/widget/angular-datatables/angular-datatables.renderer.js"></script>
    <script src="~/widget/angular-datatables/angular-datatables.directive.js"></script>
    <script src="~/widget/angular-datatables/angular-datatables.instances.js"></script>
    <script src="~/widget/angular-datatables/angular-translate.min.js"></script>
    <script src="~/widget/angular-datatables/angular-datatables.js"></script>

HTML-код: -

<table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="row-border hover"></table>

js-код: -

var dtJson = [{
            "id": 860,
            "firstName": "Superman",
            "lastName": "Yoda"
        }, {
            "id": 870,
            "firstName": "Foo",
            "lastName": "Whateveryournameis"
        }, {
            "id": 590,
            "firstName": "Toto",
            "lastName": "Titi"
        }];

    $scope.RecordMasterModel.gridData = dtJson;
    $scope.dtInstance = {};
    $scope.dtOptions = DTOptionsBuilder.fromSource(dtJson).withPaginationType('full_numbers');

    $scope.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('firstName').withTitle('First name'),
        DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
    ];

страница после рендеринга: -

введите здесь описание изображения


angularjs angular-datatables
person keyur chauhan    schedule 03.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я считаю, что gridData это то, что вы взяли из угловых смарт-таблиц или угловой сетки пользовательского интерфейса? Кроме того, fromSource() означает источник AJAX — обычно это файл типа data.json, удаленный или локальный. Вот шаги для достижения того, чего вы хотите:

разметка:

<table datatable dt-options="dtOptions" dt-columns="dtColumns"></table>

сценарий:

$scope.dtColumns = [
   DTColumnBuilder.newColumn('id', 'ID'),
   DTColumnBuilder.newColumn('firstName', 'First name'),
   DTColumnBuilder.newColumn('lastName', 'Last name')
];  
$scope.dtOptions = DTOptionsBuilder.newOptions()
  .withOption('data', dtJson)    
  .withDataProp('');

Наиболее важной частью является .withOption('data', dtJson), где вы вставляете переменную dtJson в собственный атрибут data dataTables.

теперь код работает -> http://plnkr.co/edit/ZNKMNYv9uXKCGKSOyo1y?p=preview

person davidkonrad    schedule 07.11.2015