Отключить сортировку столбцов не работает для нескольких таблиц angularjs
Я работаю с несколькими таблицами данных angularjs и генерирую новую таблицу каждый раз, когда пользователь выбирает опцию из выпадающего списка. Основываясь на выборе пользователя, я делаю запрос $ http для извлечения новых данных из базы данных. Для каждой таблицы у меня разные dtColumnDefs, который устанавливается динамически, поскольку мои заголовки столбцов таблицы являются динамическими, за исключением 1-го и 2-го и последних столбцов. Я намерен отключить сортировку для этих динамических заголовков столбцов. Я могу узнать общее количество динамических столбцов, а затем выполнить цикл, чтобы динамически отключить сортировку на этих столбцах. Несмотря на то, что таблица данных отображается успешно для каждого пользовательского ввода, но ожидаемые параметры сортировки столбцов не отключаются. Проверьте поршень на демо.
ОБНОВИТЬ
Это демонстрационная таблица, чтобы понять, как действовать, но моя исходная таблица немного сложна, где я показываю некоторые строки базы данных в качестве заголовков столбцов, а также есть некоторая фильтрация, например, уникальная, я также использую значение индекса для подсчета серийного номера, поэтому я не мог принять 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>2 ответа
ХОРОШО. Не знаю, с чего начать, но у вас был широкий диапазон ошибок в коде (без обид).
- Никогда не объявлял
x - Никогда не использовал
x - Никогда не использовал
dtColumnDefs
И еще... После некоторой отладки общая настройка сработала. Тем не менее, ваша самая большая проблема была смесь ng-repeat в сочетании с директивой, определяемой датами, в сочетании с повторным выделением одних и тех же свойств снова и снова. Было легко исправить код, но нелегко преодолеть это экстремальное состояние гонки. Потратил час, пытаясь решить это, но это невозможно без большого количества $compile"S, $applyи $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
Попробуйте использовать квадратные скобки внутри dtColumnDefsтолкать как
$scope.x.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef([i]).notSortable());