Disable column sorting not working for multiple angularjs datatables
Question
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>
2 answers
solution1
1 2017-06-27 09:38:17
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
solution2
0 2017-06-27 08:54:34
尝试在dtColumnDefs推送中使用方括号
$scope.x.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef([i]).notSortable());
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.