Question

我正在使用多个angularjs数据表并在每次用户从下拉列表中选择一个选项时生成一个新表。根据用户的选择，我发出$ http请求从数据库中获取新数据。对于每个表我有不同的动态设置的dtColumnDefs，因为我的表列标题是动态的，除了前两列和最后一列。我的意图是禁用这些动态列标题的排序。我能够找出动态列的总数然后运行一个循环到动态禁用这些列上的排序。尽管数据表成功呈现每个用户输入但预期列排序选项未被禁用。查看plunker以获取演示。

更新

这是一个演示表，了解如何继续但我的原始表有点复杂，我将一些数据库行显示为列标题，还有一些过滤，如唯一，我也使用索引值来计算串口所以我无法接受davidkonrad的答案，因为我不想从控制器定义列。

var app = angular.module('myApp', ['datatables']);
app.controller('MyCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {

    $scope.department = [{
            value: "1",
            name: "sales"
        },
        {
            value: "2",
            name: "admin"
        },
        {
            value: "3",
            name: "other"
        }
    ];

    $scope.dep = $scope.selected_dep;
    $scope.i = 0;
    $scope.depshow = function() {
        $scope.i += 1;
        var x = 'v' + $scope.i;
        $scope.m = 'v' + $scope.i;
        $scope.dep = $scope.selected_dep;
        if ($scope.dep == 1) {
            $scope.list = [{
                    "eid": "10",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                },

                {
                    "eid": "20",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                },
                {
                    "eid": "30",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                }
            ];
        } else if ($scope.dep == 2) {
            $scope.list = [{
                    "eid": "40",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                },

                {
                    "eid": "50",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                },
                {
                    "eid": "60",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                }
            ];
        }
        if ($scope.dep == 3) {
            $scope.list = [{
                    "eid": "70",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                },

                {
                    "eid": "80",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                },
                {
                    "eid": "0",
                    "dyn1": "dval1",
                    "dyn2": "dval2",
                    "dyn3": "dval3",
                    "sales": "20"
                }
            ];
        }

        $scope.x = {};

        $scope.x.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('order', [0, 'asc']);

        $scope.ln = 4;
        $scope.x.dtColumnDefs = [];
        for (var i = 1; i < $scope.ln; i++) {

            $scope.x.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
        }
    }

});

    <html>
            <head>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
              <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
              <script src="http://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
              <script src="http://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
              <link rel="stylesheet" href="http://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css"> 
            </head>
            <div class="container">
            <div ng-app="myApp" ng-controller="MyCtrl">
    Select    <select ng-model="selected_dep" ng-change="depshow()" ng-options="item.value as item.name for item in department">

    <option value="">select a department</option>   
     </select>
        
            <table  class="table table-striped table-bordered" datatable="ng" dt-options="m.dtOptions" dt-column-defs="m.dtColumnDefs" >
                <thead>
                  <tr>
            	  <th>sr</th>

            	  <th>Employee ID</th>
            	  <th>dynamic clm1</th>
                  <th>dynamic clm2</th>
            	  <th>dynamic clm3</th>
              <th>sales</th>

            </thead>
                <tbody>
              
               <tr ng-repeat="data in list">
                   <td> {{$index+1}} </td>
                                     
                  <td> {{ data.eid }} </td>
                  <td> {{ data.dyn1 }} </td>
                  <td> {{ data.dyn2 }} </td>
                  <td> {{ data.dyn3 }} </td>
                  
                  <td> {{ data.sales }} </td>
                  </tr>
            </tbody>
            </table>
            </div>
 </div>

Answer 1

行。不知道从哪里开始，但你的代码中有很多错误（没有冒犯）。

从未声明x
从未实际使用x
从未实际使用dtColumnDefs

还有更多...经过一些调试后，整体设置确实有效。但是，您最大的问题是将ng-repeat与数据表指令相结合，并反复重新声明相同的属性。修复代码很容易，但不容易克服这种极端的竞争条件。花了一个小时试图解决它，但没有很多$compile，$apply和$timeout的情况下是不可能的。

它真的不必如此复杂。据我所知，你有两个问题1）notSortable不起作用2）你可以为不同的列表提供不同的列（属性）。只需让dataTables呈现数据，并在每次选择新列表时动态声明dtColumns：

var columns = [];
for (var prop in $scope.list[0] ) {
  columns.push({ data: prop })
}
$scope.x.dtColumns = columns;

将$scope.list设置为数据源：

$scope.x.dtOptions = DTOptionsBuilder.newOptions()
   .withOption('data', $scope.list)

渲染“dataTables方式”：

<table datatable=""  ....></table>

forked plnkr - ＆gt;的 http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=preview

Answer 2

尝试在dtColumnDefs推送中使用方括号

$scope.x.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef([i]).notSortable());

禁用列排序不适用于多个angularjs数据表

2 个答案: