Question

我使用角度数据表（http://l-lin.github.io/angular-datatables/#/welcome）。

我提出了这个Plunker：http://plnkr.co/edit/ZRvQt7KBZam22Yt5S4QC?p=preview。

我尝试根据从服务器提取的数据动态更改数据表中的列数。有没有办法做到这一点？我正在使用控件＆＃34; Angular方式＆＃39;：

<table datatable="ng"></table>

提前感谢你花时间看看这个。

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />


</head>

<body ng-controller="MainCtrl as mCtrl">
<table id="dtFeeDetails" datatable="ng" dt-options="mCtrl.dtOptionsForFeeDetails" dt-column-defs="mCtrl.dtColumnDefs" dt-instance="mCtrl.dtInstance">

    <tbody>
        <tr dt-rows ng-repeat="f in feeData">
            <td ng-repeat="c in colHeadings">{{f[c.Value]}}</td>
        </tr>
    </tbody>
</table>

<p>
    <button type="button" ng-click="changeColumnDefs()">Change column defs</button>
</p>

<script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="app.js"></script>

app.js

var app = angular.module('plunker', ['datatables']);

app.controller('MainCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {
var vm = this;
$scope.feeData = [{ val1: 'data1'}, { val1: 'data2'}];
$scope.colHeadings = [{ Value: 'val1' }];
vm.dtInstance = {};
vm.dtColumnDefs = [
            DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value)
        ];
vm.dtOptionsForFeeDetails = DTOptionsBuilder.newOptions();
var dtFeeDetailsID = "dtFeeDetails";


$scope.changeColumnDefs = function() {
  //$('#' + dtFeeDetailsID).DataTable().destroy();
  //$('#' + dtFeeDetailsID).dataTable();

  // this won't work, because we're changing the number of columns
  $scope.colHeadings = [{ Value: 'val1' }, { Value: 'val2' }];
  $scope.feeData = [{ val1: 'data3', val2: 'data5'}, { val1: 'data4', val2: 'data6'}];
  vm.dtColumnDefs = [];
  vm.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value),
    DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[1].Value)
    ];

  // this will work, because we're keeping the same number of columns  
  //$scope.colHeadings = [{ Value: 'val2' }];
  //$scope.feeData = [{ val2: 'data3'}, { val2: 'data4'}]; 
  //vm.dtColumnDefs = [];
  //vm.dtColumnDefs = [
  //  DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value),
  //  ];
};

}）;

angular datatables改变列数

0 个答案: