Datatable не генерирует функцию после вызова в angular js

Я отображаю данные в datatable. Поэтому, когда я попадаю на страницу без вызова функции, она работает, но когда я хочу сгенерировать данные после вызова функции, она не работает.

HTML:

             <div class="widget-body no-padding">
              <table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Section</th>
                    <th>Gender</th>                       
                  </tr>
                </thead>
              </table>
            </div>
           <div class="text-center margin-top-10 margin-bottom-10">
          <button class="btn btn-xs btn-primary" ng-
               click="tableCall();">Apply</button>
           </div>

Контроллер:

 $scope.tableCall=function(){
    this.standardOptions = DTOptionsBuilder
      .fromFnPromise(call.all('------API----------').getList())
      .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
      .withBootstrap();
    this.standardColumns = [
        DTColumnBuilder.newColumn('name').withOption('defaultContent','-'),
        DTColumnBuilder.newColumn('age').withOption('defaultContent','-'),
        DTColumnBuilder.newColumn('section').withOption('defaultContent','-'),
        DTColumnBuilder.newColumn('gender').withOption('defaultContent','-'),
      ];
}

ДАННЫЕ JSON:

[
{
name: "thomus",
age: 27,
section:"K",
gender:"M" 
},
{
name: "Roy",
age: 67,
section:"m",
gender:"F" 
},
{
name: "Keni",
age: 34,
section:"L",
gender:"F" 
}
]

Datatable отлично работает без вызова функции. Если я не буду использовать функцию tableCall, то генерируется datatable.

Как показано ниже:

HTML

 <div class="widget-body no-padding">
              <table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Section</th>
                    <th>Gender</th>                       
                  </tr>
                </thead>
              </table>
            </div>

Контроллер

this.standardOptions = DTOptionsBuilder
          .fromFnPromise(call.all('------API----------').getList())
          .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
          "t" +
          "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
          .withBootstrap();
        this.standardColumns = [
            DTColumnBuilder.newColumn('name').withOption('defaultContent','-'),
            DTColumnBuilder.newColumn('age').withOption('defaultContent','-'),
            DTColumnBuilder.newColumn('section').withOption('defaultContent','-'),
            DTColumnBuilder.newColumn('gender').withOption('defaultContent','-'),
          ];

Этот код работает и генерирует данные, но я хочу реализовать данные после вызова функции.


javascript datatable angularjs angular-datatables
person Varun Sharma    schedule 19.09.2017    source источник
comment
Вы пытались инициализировать this.standardOptions во время сборки контроллера как: this.standardOptions = {}. Предназначен для хранения ссылки на отображение данных. попробуйте поставить его в начале вашего контроллера   -  person Silvinus    schedule 19.09.2017
comment
И чтобы сохранить ссылку, обновите свою функцию, например: $scope.tableCall=function(){ angular.extend(this.standardOptions, DTOptionsBuilder...   -  person Silvinus    schedule 19.09.2017
comment
@Сильвинус. спасибо за комментарий. Не могли бы вы предоставить пример кода в качестве ответа.   -  person Varun Sharma    schedule 19.09.2017

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте инициализировать this.standardOptions в начале

this.standardOptions = {};
$scope.tableCall=function(){
   angular.extend(this.standardOptions, DTOptionsBuilder
  .fromFnPromise(call.all('------API----------').getList())
  .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
  "t" +
  "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
  .withBootstrap());
this.standardColumns = [
    DTColumnBuilder.newColumn('name').withOption('defaultContent','-'),
    DTColumnBuilder.newColumn('age').withOption('defaultContent','-'),
    DTColumnBuilder.newColumn('section').withOption('defaultContent','-'),
    DTColumnBuilder.newColumn('gender').withOption('defaultContent','-'),
  ];
}

Другие вещи кажутся странными. StandardOptions определен для этого, но функция tableCall определена для $scope. Используете ли вы в своей DOM ng-controller с ключевым словом as? Проверьте, следует ли вам использовать $scope или это. Я думаю, что здесь есть ошибка.

person Silvinus    schedule 19.09.2017