I used a directive to buildup database after ng-repeat finished:
app.directive('repeatDone', function() { return function(scope, element, attrs) { if (scope.$last) { scope.$eval(attrs.repeatDone); } } }); function InformationController($scope, $http) { $http.get("people").success(function(response) { $scope.people = response; }); $scope.initDataTable = function() { $('#employeeTable').DataTable({ }); }; };
<table class="table table-striped table-bordered table-hover" id="employeeTable"> <thead> <tr> <th>id</th> <th>Name</th> <th>Gender</th> </tr> </thead> <tbody> <tr ng-repeat="result in people" repeat-done="initDataTable()"> <td>{{ result.id }}</td> <td>{{ result.name }}</td> <td>{{ result.gender }}</td> </tr> </tbody> </table>
The data is displayed normally, but cannot use default sorting or searching.
Is there anything wrong? What should I do to enable the sorting and searching?
I had same issue with my table not searching nor sorting after populating the table.
the thing missing for angularjs is datatable="ng" on the table i had datatable="" initially.
Hope this helps
You cannot directly use datatables features in angular, since this is highly associated with execution sequences that gets overlapped and the functionality getting disturbed. You can induce a timeout specifically like below
setTimeout(function () {
angular.element("#datatable").datatable();
}, 10);
or do a tweak
add a blank element like this one below
$scope.temp = { "Name": "", "ID": "", "SSN": "" };
$scope.skills.unshift($scope.temp);
setTimeout(function () {
$scope.skills.shift();
$scope.apply;
}, 10);
What the above code does basically is adding a temp record(ie blank) initially to the existing record collection and pull that back again, by doing this way datatable search,sort functionality is retrieved in angular.
Again this will work with a directive being created for datatable like below
app.directive('datatable', function () {
return {
restrict: 'AC',
link: function (scope, element, attrs) {
//
scope.$watch('skills', function (newValue, oldValue) {
if (newValue != undefined) {
if (newValue.length > 0) {
var rows = element.find("tbody").find('tr');
var fixedColumn = 3;
if ($.fn.dataTable.isDataTable(element)) {
var tbl = $(element).dataTable();
tbl.fnClearTable();
for (var i = 0; i < rows.length; i++) {
tbl.fnAddData($(rows[i]));
}
}
else {
element.DataTable({ paging: true, sorting: true, "order": [[0, "asc"]], columnDefs: [{ orderable: false, "targets": fixedColumn }] });
}
element.find('tbody').on('click', 'tr', function () {
$(this).addClass('selected');
$(this).siblings('tr').removeClass('selected');
});
element.fadeIn();
}
}
}, true);
}
}
});
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.