表格在AngularJS中没有正确形成

时间:2015-10-10 07:46:00

标签: javascript jquery json angularjs datatable

编辑1 -

Plnkr展示问题 - http://plnkr.co/edit/qQn2K3JtSNoPXs9vI7CK?p=preview

  

----------------原始代码和问题----------------

我正在使用angular datatable生成表格视图。

我非常简单的控制器代码如下 -

function tableTestCtrl ($scope, DTOptionsBuilder, DTColumnBuilder, localStorageService) {
    console.log('From Table');
    var tbData = localStorageService.get('tabledata') || {};
    var dd = new Array();
    dd = [{"Name": "Tiger Nixon", "Age": "61"},{"Name": "Garrett Winters","Age": "63"}];   
    //$scope.dtOptions = DTOptionsBuilder.fromSource(dd);
    $scope.dtOptions = dd;
    console.log($scope.dtOptions);
                $scope.dtColumns = [
                DTColumnBuilder.newColumn('Name').withTitle('Name'),
                DTColumnBuilder.newColumn('Age').withTitle('Age')
            ];
}

我的查看代码 -

<div class="panel-body" ng-controller="tableTestCtrl">
    <div class="table-responsive" ng-if="dtOptions">
        <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered table-hover"></table>
    </div>
</div>

以下是我得到的结果(在控制台中没有错误) -

Result

如果我从该行中删除评论 -

//$scope.dtOptions = DTOptionsBuilder.fromSource(dd);

警告以下错误 -

  

DataTables警告:table id = DataTables_Table_0 - 无效的JSON   响应。有关此错误的详细信息,请参阅   http://datatables.net/tn/1

请让我知道我在做什么错误

1 个答案:

答案 0 :(得分:2)

以这种方式尝试:

$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('data', dd);

您还可以使用DTOptionsBuilder设置其他选项。您尝试使用JSON构建完整的数据表选项,而您只需设置&#34;数据&#34;属性。

Plunkr