Как загрузить таблицу angular-datatables с массивом javascript в контроллере

#javascript #arrays #angularjs #datatables #angular-datatables

#javascript #массивы #angularjs #таблицы данных #angular-datatables

Вопрос:

Я хочу загрузить таблицу angular-datatable с массивом javascript, но если я попробую это сделать, я получу эту ошибку

 DataTables warning: table id=DataTables_Table_0 - Ajax error. For more information about this error, please see http://datatables.net/tn/7
  

похоже, он пытается получить доступ к какому-то URL

Я хочу загрузить ее с моего контроллера angularjs, вот мой html-код

 <div class="table-responsive">
        <table datatable="" 
               dt-options="ctrl.dtOptions" 
               dt-columns="ctrl.dtColumns" 
               class="table table-striped table-bordered table-hover"
               width="100%">
        </table>
    </div>
  

и вот код внутри моего контроллера angularjs:

 var data = [{
                    "name": the name,
                    "lastname": "xx",
                    "age": 2
                }, {
                    "name": the name two,
                    "lastname": "yy",
                    "age": 3
                }];




            vm.dtOptions = DTOptionsBuilder.fromSource(JSON.stringify(data))
                    .withOption('createdRow', createdRow)
                    .withOption('stateSave', true)
                    .withPaginationType('full_numbers')
                    // Add Bootstrap compatibility
                    .withBootstrap()
                    // Active Responsive plugin
                    .withOption('responsive', true);
            vm.dtColumns = [
                DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
                        .renderWith(actionsHtmlEstatus),
                DTColumnBuilder.newColumn('name').withTitle('Name'),
                DTColumnBuilder.newColumn('lastname').withTitle('lastname'),
                DTColumnBuilder.newColumn('age').withTitle('age')
            ];
  

Ответ №1:

Если у вас есть статический литерал JSON / object, просто используйте data опцию :

 vm.dtOptions = $scope.dtOptions = DTOptionsBuilder.newOptions()
   .withOption('data', data) // <---- like this
   .withOption('createdRow', createdRow)
   .withOption('stateSave', true)
   ...
  

демонстрация с использованием образца массива в OP ->
http://plnkr.co/edit/s2RybDQ8WV27jPOf4VQA?p=preview

Ответ №2:

Вы не можете использовать .fromSource , поскольку он всегда будет выполнять запрос ajaxUrl. вместо этого вы можете использовать .fromFnPromise() . Вам нужно поместить свой JSON в функцию, которая возвращает deferred.promise.

проверьте ниже pen для рабочего примера:

 http://codepen.io/anon/pen/jrLpZX