禁用列排序不适用于多个angularjs数据表 [英] Disable column sorting not working for multiple angularjs datatables
问题描述
我正在使用多个angularjs数据表并在每次用户从下拉列表中选择一个选项时生成一个新表。根据用户的选择，我发出$ http请求从数据库中获取新数据。对于每个表我有不同的动态设置的dtColumnDefs，因为我的表列标题是动态的，除了前两列和最后一列。我的意图是禁用这些动态列标题的排序。我能够找出动态列的总数然后运行一个循环到动态禁用这些列上的排序。尽管数据表成功呈现每个用户输入但预期列排序选项未被禁用。
查看 plunker 进行演示。
I am working with multiple angularjs data tables and generating a new table every time user selects an option from the drop down list.Based on the user's selection i make an $http request to fetch new data from the database .For every table i have different dtColumnDefs which is set dynamically since my table column headers are dynamic except 1st two and last columns.My intention is to disable sorting for these dynamic column headers.I am able to find out total number of dynamic columns then run a loop to dynamically disable sorting on those columns.Though the data table renders successfully for every user input but expected columns sorting options are not getting disabled. Check the plunker for demo.
更新
这是一个演示表，了解如何继续但我的原始表有点复杂的地方我我显示一些数据库行作为列标题，还有一些过滤，如唯一，我也使用索引值来计算序列，所以我不能接受 davidkonrad 的答案因为我不想从控制器定义列。
This is a demo table to understand how to proceed but my original table is little bit complex where i am showing some database rows as column headers and there is also some filtering such as unique ,i am also using index value to count the serial so i could not accept davidkonrad's answer as i don't want to define columns from 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>
推荐答案
确定。不知道从哪里开始，但你的代码中有很多错误（没有冒犯）。
OK. Dont know where to start, but you a had broad range of errors in your code (no offense).
- 从未声明
x - 从不实际使用
x - 从未实际使用
dtColumnDefs
- Never declared
x - Never actually used
x - Never actually used
dtColumnDefs
还有更多...经过一些调试后，整体设置确实有效。但是，您最大的问题是将 ng-repeat 与datatable指令相结合，并反复重新声明相同的属性。修复代码很容易，但不容易克服这种极端的竞争条件。花了一个小时试图解决它，但没有很多 $ compile ， $ apply 和 $ timeout 。
And more...After some debugging the overall setup did work. However, your biggest problem was the mix of ng-repeat combined with the datatable directive combined with redeclaring the same properties over and over. It was easy to fix the code, but not easy to overcome this extreme race condition. Spent an hour trying to work it out, but it is not possible without a lot of $compile's, $apply's and $timeout's.
它真的不必太复杂。据我所知，你有两个问题1） notSortable 不起作用2）你可以为不同的列表提供不同的列（属性）。只需让dataTables呈现数据，并在每次选择新列表时动态声明 dtColumns ：
It really do not have to be so complicated. As I understand you had two issues 1) notSortable did not work 2) you could have different columns (properties) for different lists. Simply let dataTables render the data, and declare dtColumns dynamically each time a new list is selected :
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方式：
render the "dataTables way" :
<table datatable="" ....></table>
forked plnkr - > http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=preview
forked plnkr -> http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=preview
这篇关于禁用列排序不适用于多个angularjs数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
