Disable sorting columns not working for multiple corner data
I am working with multiple angularjs data tables and create a new table every time the user selects an option from the dropdown. Based on the user's choice, I am making a $ http request to fetch new data from the database. For each table I have different dtColumnDefs that are set dynamically as the table column headers are dynamic except for the 1st and last column. My intention is to disable sorting for these dynamic column headers. I can find out the total number of dynamic columns, then run a loop to dynamically disable sorting on those columns. Although the data table is displayed successfully for each user, the expected column collation is not disabled. Check out the plunker demo...
UPDATE
This is a demo table to understand how to proceed, but my original table is a little tricky when I show some database rows as column headers and there is also some filtering like unique, I also use the index value to count so I couldn't accept answer davidkonrad
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>
source to share
OK. Not sure where to start, but you had a wide range of bugs in your code (no offense).
- Never announced
x
- Never used
x
- Never used
dtColumnDefs
And more ... After some debugging, the general setup did work. However, your biggest problem was the combination ng-repeat
of the datatable directive combined with reusing the same properties over and over again. It was easy to fix the code, but not easy to overcome this extreme race condition. Worked for an hour trying to process it, but this is impossible without a lot of $compile
, $apply
and $timeout
.
It really shouldn't be that hard. As I understand it, you had two problems: 1) notSortable
doesn't work 2) you may have different columns (properties) for different lists. Just let the dataTables render the data and declare dtColumns
dynamically every 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 path:
<table datatable="" ....></table>
forked plnkr -> http://plnkr.co/edit/afqKW5uKW7Skfnm62zfq?p=preview
source to share