禁用列排序不适用于多个 angularjs 数据表
Posted
技术标签:
【中文标题】禁用列排序不适用于多个 angularjs 数据表【英文标题】：Disable column sorting not working for multiple angularjs datatables 【发布时间】：2017-11-30 05:58:13 【问题描述】：我正在处理多个 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>【问题讨论】：
查看***.com/questions/31027497/… 已删除我无用的答案。正如提到的other“线程”我认为你在轨道上。您必须删除绑定，即在重新初始化之前销毁数据表。 @davidkonrad 仍然无法弄清楚这一点。检查plnkr.co/edit/4Js7ZGQAbJMYQVX1NchN?p=preview @query，已取消删除并更新了答案。有一个分叉的 plnkr。 【参考方案1】：好的。不知道从哪里开始，但是您的代码中存在广泛的错误（无意冒犯）。
从未声明x
从未实际使用过x
从未实际使用过dtColumnDefs
还有更多...经过一些调试后，整体设置确实有效。但是，您最大的问题是 ng-repeat 与 datatable 指令的组合以及一遍又一遍地重新声明相同的属性。修复代码很容易，但要克服这种极端的竞争条件并不容易。花了一个小时试图解决这个问题，但是如果没有很多 $compile's、$apply's 和 $timeout's，这是不可能的。
真的不必那么复杂。据我了解，您有两个问题 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>
分叉的 plnkr -> http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=preview
【讨论】：
不，我的目的不是禁用所有列的排序，而是我只想禁用所有表的列 #1、#2 和 #3 您使用的是什么版本的角度数据表？我感觉您使用的是旧版本，请选择最新的 0.6.2。有no reason for your notSortable not is working ...如果有错误，则不包含在您上面的代码中。 用 0.6.2 版本测试了我的代码，但没有错误也没有运气，我认为问题与版本无关。但是，我忘了提到，如果我使用您在柱塞中使用的单个表，但如果有多个表，我的意思是多次调用函数 depshow() 那么这不再有效。 我的列是动态的，除了 colmun #0 所以我别无选择，只能使用循环！ 一个在这里发布了一个演示表以了解如何进行，但我的原始表有点复杂，我将一些数据库行显示为列，还有一些过滤，如唯一，我也在使用索引值来计算序列，因此如果您更新 plunker 保持视图的 tr 标记完整，这对我将非常有帮助。我的意思是我不想在控制器中定义列我想从视图中处理它作为我发布的 plunker。有可能实现吗？【参考方案2】：尝试在dtColumnDefspush like 中使用方括号
$scope.x.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef([i]).notSortable());
【讨论】：
以上是关于禁用列排序不适用于多个 angularjs 数据表的主要内容，如果未能解决你的问题，请参考以下文章
带有 angularjs 的数据表不适用于 Columns 和 dtOptions
DataTable Bootstrap 不适用于 AngularJs
$http.POST 不适用于 DATETIME 数据类型（AngularJS、Spring 4.2、MySQL、Hibernate）