如何在angular-datatable中实现动态列隐藏？

Question

我有以下数据表结构

<table id="display" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-bordered hover" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>INPUT TYPE</th>
        <th>INPUT NAME</th>
        <th>VALUE</th>
        <th>UNIT</th>
        <th ng-repeat="n in TableColumns | orderBy:'Name'">{{n.Name}}</th>
        <th class="noExport" style="width:50px">VIEW</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="x in DisplayData">
        <td>{{x.Type}}</td>
        <td>{{x.Name}}</td>
        <td>{{x.Value}}</td>
        <td>{{x.Unit}}</td>
        <td ng-repeat="n in x.OptionData | orderBy:'Name'">{{n.Value}}</td>
        <td>
            <a ng-click="gotoLink(x)"><span class="glyphicon glyphicon-eye-open"></span></a>
        </td>
</tbody>

下面是angular代码

$scope.TableColumns = [];
$scope.getAllData = function (item) {
   var DashboardData = item;
   resultService.getDataById(fetchData).then(function (response) {
       if (response.data.length > 0) {
           $scope.DisplayData = response.data;
           $scope.TableColumns = response.data[0].OptionData;
       }
   });
}

和response.data[0].OptionData 看起来像

var result = [{OptionsId: 1, Name: "Pressure", Value: 10}
              {OptionsId: 2, Name: "Temperature", Value: 20}
              {OptionsId: 3, Name: "Humidity",Value: 30},.....];

我如何动态隐藏结果集 $scope.TableColumns 中的列，假设它有大约 50 个结果，但我想显示 10 个，所有其他应该在初始加载时隐藏？

Answer 1

我找到了一个简单的解决方案

首先在 $scope.TableColumns 数组中附加一个字段，例如 'visibility' = true 或 false。

$scope.TableColumns = [{OptionsId: 1, Name: "Pressure", Value: 10, visibility: true}
          {OptionsId: 2, Name: "Temperature", Value: 20,visibility: false}
          {OptionsId: 3, Name: "Humidity",Value: 30,visibility: true},.....];

然后更改以下部分

$scope.dtColumnDefs = [];
$scope.TableColumns = [];
$scope.getAllData = function (item) {
   var DashboardData = item;
   resultService.getDataById(fetchData).then(function (response) {
       if (response.data.length > 0) {
          $scope.DisplayData = response.data;
          $scope.TableColumns = response.data[0].OptionData;
          angular.forEach($scope.SiteTableColumns, function (v, k) {
                var index = 4 + k; //0-3 index value of columns manually set in the table and k+1 for array index
                  if (v.visibility == true) {
                     $scope.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(index).withTitle(v.Name));
                } else {
                    $scope.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(index).withTitle(v.Name).notVisible());
                }          
            });
       }
   });
}

Answer 2

DataTables 实际上有一个 columns.visible 选项（也适用于 columnDefs）。您可以通过（示例）在 dtColumnDefs 中设置初始可见性：

DTColumnDefBuilder
  .newColumnDef(0)
  .withOption('data', 'office')
  .withTitle('office')
  .withOption('visible', false)

有一个notVisible()"shorthand"。您可以随时通过 dtInstance（您似乎没有使用）更改可见性。添加一个 dt-instance 属性到 table:

<table datatable="ng"
   ...
   dt-instance="dtInstanceCallback">

以这种方式实施dtInstanceCallback：

$scope.dtInstanceCallback = function(instance) {
   $scope.dtInstance = instance
}

现在您可以通过

即时更改列可见性

$scope.dtInstance.DataTable.column(0).visible(true) //or false

演示 -> http://plnkr.co/edit/ZXHisTJSU8tHgCLUEGP4?p=preview

如何在angular-datatable中实现动态列隐藏？

How to achieve dynamic column hiding in angular-datatable?

javascript

angularjs

angular-datatables