Question

我在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 DATA：

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

数据表工作正常，没有函数调用。如果我不使用函数 tableCall ，则数据表正在生成。

如下面的代码：

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','-'),
          ];

这段代码正在工作并生成数据表，但是我想在调用函数后实现数据表。

Answer 1

尝试在开头

初始化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和＆＃39;作为＆＃39;关键字？检查是否应使用$ scope或this。我认为这里有一个错误。

数据表不会在角度js中生成后调用函数

1 个答案: