Angular JS中的调用函数后未生成数据表 [英] Datatable is not generating after call function in angular js

问题描述

我正在数据表中显示数据。因此，当我在不进行函数调用的情况下进入页面时，该函数正常工作，但是当我想在调用函数后生成数据表时，该函数不起作用。

I am displaying data in datatable. So when I land on the page without function call than it is working but when I want to generate datatable after calling function than it is not working.

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" 
}
]

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

Datatable working fine without function call. If I will not use function tableCall then datatable is generating.

就像下面的代码一样：

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

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

This code is working and generating datatable, But I want to implement datatable after call the function.

推荐答案

尝试在开始时初始化this.standardOptions

Try to initialized this.standardOptions at the begining

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，但在$ scope上定义tableCall函数。
在您的DOM中，您是否将ng-controller与 as关键字一起使用？
检查是否应该使用$ scope或this。我认为这是一个错误。

Another things seems strange. standardOptions is defined on this but tableCall function is defined on $scope. In your DOM, do you use ng-controller with 'as' keyword ? Check if you should use $scope or this. I think there is a mistake here.

这篇关于Angular JS中的调用函数后未生成数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！