Я использовал директиву для создания базы данных после завершения ng-repeat:
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>
Данные отображаются нормально, но не могут использовать сортировку или поиск по умолчанию.
Что-то не так? Что делать, чтобы включить сортировку и поиск?
Вы не можете напрямую использовать функции datatables в угловом режиме, поскольку это очень связано с последовательностями выполнения, которые перекрываются, а функциональность становится нарушенной. Вы можете вызвать таймаут, как показано ниже.
setTimeout(function () {
angular.element("#datatable").datatable();
}, 10);
или сделать настройку
добавьте пустой элемент, подобный этому ниже
$scope.temp = { "Name": "", "ID": "", "SSN": "" };
$scope.skills.unshift($scope.temp);
setTimeout(function () {
$scope.skills.shift();
$scope.apply;
}, 10);
То, что приведенный выше код делает в основном, заключается в том, чтобы сначала добавить временную запись (т.е. пустое) в существующую коллекцию записей и вернуть ее обратно, делая таким образом метод поиска данных, функции сортировки извлекаются в угловом формате.
Опять же, это будет работать с директивой, создаваемой для данных, например ниже
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);
}
}
});
У меня была та же проблема, что и мой стол, не выполняющий поиск и сортировку после заполнения таблицы.
вещь, отсутствующая для angularjs, является datatable = "ng" на таблице, в которой я имел datatable = "" изначально.
Надеюсь это поможет