禁用列排序不适用于多个 angularjs 数据表 [英] Disable column sorting not working for multiple angularjs datatables
问题描述
我正在处理多个 angularjs 数据表并在每次用户从下拉列表中选择一个选项时生成一个新表.根据用户的选择，我发出 $http 请求以从数据库中获取新数据.对于每个表我有不同的 dtColumnDefs，它是动态设置的，因为我的表列标题是动态的，除了第一列和最后一列.我的目的是禁用对这些动态列标题的排序.我能够找出动态列的总数，然后运行一个循环动态禁用对这些列的排序.虽然数据表为每个用户输入成功呈现，但预期的列排序选项没有被禁用.查看 plunker 的演示.
更新
这是一个演示表，用于了解如何进行，但我的原始表有点复杂，我将一些数据库行显示为列标题，还有一些过滤，例如 unique，我还使用索引值来计算serial 所以我不能接受 davidkonrad 的回答，因为我不想从控制器定义列.
var app = angular.module('myApp', ['datatables']);app.controller('MyCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {$scope.department = [{值:1"，名称:销售"},{值:2"，姓名:管理员"},{值:3"，名称:其他"}];$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;如果($scope.dep == 1){$scope.list = [{"开斋节": "10","dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":20"},{"开斋节": "20","dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":20"},{"开斋节": "30","dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":20"}];} else if ($scope.dep == 2) {$scope.list = [{"开斋节": "40","dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":20"},{"开斋节": "50","dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":20"},{"eid": "60","dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":20"}];}如果($scope.dep == 3){$scope.list = [{"开斋节": "70","dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":20"},{"开斋节": "80","dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":20"},{开斋节":0"，"dyn1": "dval1","dyn2": "dval2","dyn3": "dval3",销售额":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());}}}); <头><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"><div class="容器"><div ng-app="myApp" ng-controller="MyCtrl">选择<select ng-model="selected_dep" ng-change="depshow()" ng-options="item.value as item.name for item in Department"><option value="">选择一个部门</option></选择><table class="table table-striped table-bordered" datatable="ng" dt-options="m.dtOptions" dt-column-defs="m.dtColumnDefs" ><头><tr><th>sr</th><th>员工 ID</th><th>动态clm1</th><th>动态clm2</th><th>动态clm3</th><th>销售额</th></thead><tr ng-repeat="列表中的数据"><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> 解决方案 好的.不知道从哪里开始，但是您的代码中存在广泛的错误(无意冒犯).
- 从未声明过
x - 从未真正使用过
x - 从未真正使用过
dtColumnDefs
还有更多......经过一些调试后，整体设置确实有效.但是，您最大的问题是 ng-repeat 与 datatable 指令相结合，并一遍又一遍地重新声明相同的属性.修复代码很容易，但克服这种极端的竞争条件并不容易.花了一个小时试图解决这个问题，但如果没有很多 $compile、$apply 和 $timeout，这是不可能的> 的.
其实没必要这么复杂.据我了解，您有两个问题 1) notSortable 不起作用 2) 您可以为不同的列表设置不同的列(属性).只需让 dataTables 呈现数据，并在每次选择新列表时动态声明 dtColumns :
var columns = [];for (var prop in $scope.list[0] ) {column.push({ 数据: 道具 })}$scope.x.dtColumns = 列；
设置 $scope.list 作为数据源:
$scope.x.dtOptions = DTOptionsBuilder.newOptions().withOption('数据', $scope.list)
渲染dataTables方式":
分叉的 plnkr -> http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=预览
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.
UPDATE
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).
- Never declared
x
- Never actually used
x
- Never actually used
dtColumnDefs
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.
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;
Set $scope.list as data source :
$scope.x.dtOptions = DTOptionsBuilder.newOptions()
.withOption('data', $scope.list)
render the "dataTables way" :
<table datatable="" ....></table>
forked plnkr -> http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=preview
这篇关于禁用列排序不适用于多个 angularjs 数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆