Datatables с Angularjs: сортировка и поиск по умолчанию не работают

0

Я использовал директиву для создания базы данных после завершения 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>

Данные отображаются нормально, но не могут использовать сортировку или поиск по умолчанию.

Что-то не так? Что делать, чтобы включить сортировку и поиск?

  • 0
    Вы имеете в виду сортировку по определенному столбцу при загрузке или когда пользователь нажимает на заголовок столбца?
  • 0
    @jonmrich yes, щелкните заголовок столбца для сортировки.
Теги:
datatables

2 ответа

0
Лучший ответ

Вы не можете напрямую использовать функции 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);
            }
        }
    });
  • 0
    Это дает мне ошибку в строке angular.element (...). Datatable не является функцией.
1

У меня была та же проблема, что и мой стол, не выполняющий поиск и сортировку после заполнения таблицы.

вещь, отсутствующая для angularjs, является datatable = "ng" на таблице, в которой я имел datatable = "" изначально.

Надеюсь это поможет

Ещё вопросы

Сообщество Overcoder
Наверх
Меню