我正在处理多个 angularjs 数据表，并在每次用户从下拉列表中选择一个选项时生成一个新表。根据用户的选择，我发出 $http 请求以从数据库中获取新数据。对于每个表我有不同的 dtColumnDefs，它是动态设置的，因为我的表列标题是动态的，除了第一列和最后一列。我的目的是禁用对这些动态列标题的排序。我能够找出动态列的总数，然后运行一个循环到动态禁用对这些列的排序。虽然数据表为每个用户输入成功呈现，但预期的列排序选项没有被禁用。 检查plunker用于演示。
更新
这是一个演示表，用于了解如何进行，但我的原始表有点复杂，我将一些数据库行显示为列标题，还有一些过滤，例如唯一性，我还使用索引值来计算serial 所以我不能接受 davidkonrad 的回答，因为我不想从 Controller 定义列。
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>最佳答案
好的。不知道从哪里开始，但您的代码中存在广泛的错误(无意冒犯)。
- 从未声明过
x - 从未实际使用过
x - 从未实际使用过
dtColumnDefs
还有更多...经过一些调试后，整体设置确实有效。但是，您最大的问题是 ng-repeat 与 datatable 指令的混合，以及一遍又一遍地重新声明相同的属性。修复代码很容易，但克服这种极端的竞争条件并不容易。花了一个小时试图解决这个问题，但如果没有大量的 $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 -> http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=preview
关于javascript - 禁用列排序不适用于多个 angularjs 数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44775899/