ngTable не сортирует?

Я пытаюсь показать данные в html, используя ngTable.

В html я сделал все столбцы "сортируемыми".

  <table ng-table="fm.tableParams" class="table" show-filter="false">
        <tr ng-repeat="report in $data">
            <td title="'ReportId'" sortable="'reportId'" class="text-center">
                {{report.reportId}}</td>
            <td title="'SampleId'" sortable="'sampleId'" class="text-center">
                {{report.sampleId}}</td>
            <td title="'MRN'" sortable="'mrn'" class="text-center">
                {{report.mrn}}</td>
            <td title="'Diagnosis'" sortable="'diagnosis'" class="text-center">
                {{report.diagnosis}}</td>
        </tr>
    </table>

Данные берутся с сервера. контроллер.js

ristoreApp.controller("fmCtrl",
    ['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
        var self = this;
        $scope.selection = '0';
        $scope.fmSearch = function () {
            if ($scope.selection == '0') {
                self.tableParams = new NgTableParams({
                    page: 1,            // show first page
                    count: 10,          // count per page
                }, {
                    getData: function (params) {
                        return fmFactory.getAll().then(function(response) {
                            var reports = response.data;
                            params.total(reports.length);
                            console.log(reports.length);
                            return reports;
                        });

                    }
                });
                self.tableParams.reload();
            }
        }
    }]
)

Он показывает записи на странице. Однако сортировка не работает ни для одного из столбцов. Что мне нужно сделать, чтобы заставить его работать?

EDIT: Согласно ngtable.com, «вам нужно будет применить значения из NgTableParams.sorting() к данным, которые вы хотите отобразить в своей таблице. Обычно это происходит, когда данные извлекаются с сервера». Однако не сказано, как применить этот метод к данным. Кажется, что ngtable 1.0.0 плохо документирован и не имеет примеров. Может ли кто-нибудь показать мне, как сортировать на стороне клиента?


angularjs sorting ngtable
person ddd    schedule 16.08.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Автоматическая сортировка работает только при использовании полного свойства dataset (как видно из простых примеров здесь).

Когда вы реализуете метод getData(), ваша очередь (или, в большинстве случаев, задача сервера) выполнить сортировку. В свойстве params вы найдете sorting, который вам обычно нужно передать на сервер, чтобы сервер мог выполнить сортировку. В частности, при использовании представления с разбивкой на страницы (и, следовательно, возврате не всех элементов одновременно), серверу необходимо выполнить сортировку перед выбором соответствующих элементов для страницы.

Поэтому, если у вас не так много элементов и вам не нужна нумерация страниц, вы можете отсортировать свой массив перед его возвратом. Если вы не хотите загружать все элементы заранее, вам нужно передать информацию о сортировке на сервер и позволить серверу выполнить сортировку и разбиение по страницам.

person Andreas Jägle    schedule 16.08.2016
comment
Итак, каждый раз, когда я нажимаю на маленькие стрелки каждого столбца на веб-странице, я отправляю запрос на сервер и получаю список json в определенном порядке? Все, что я сделал, чтобы получить данные с сервера, это вызвать API отдыха. Как указать другой порядок по разным столбцам в http-запросе? - person ddd; 17.08.2016
comment
Это сильно зависит от остальных API, на которые вы ориентируетесь. Если API не поддерживает сортировку, единственный способ решить эту проблему — загрузить все элементы и отсортировать их на стороне клиента. - person Andreas Jägle; 17.08.2016
comment
Это именно то, что я собираюсь сделать - сортировать их на стороне клиента. Как мне это сделать? - person ddd; 17.08.2016
comment
Вы можете использовать Angular фильтр orderBy для данных, возвращаемых с сервера, перед применением этого данные в табл. Таким образом, вы сможете сортировать данные на стороне клиента. - person jagmohan; 17.08.2016

arrow_upward
1
arrow_downward

Хорошо, в моем случае я использую getData для вызова службы rest API, которая возвращает только одну страницу с 30 строками данных, поэтому мне нужно указать в параметрах моей службы текущую страницу, размер страницы, поле для сортировки и порядка ( «ASC» или «DESC»), например:

http://localhost:3000/api/my_service/?current_page=1&page_size=30&field_sort=date&order_sort=desc

Итак, для этого у меня есть в моем getData:

getData: function(params){
  var sorter     = params.sorting()
  vm.sortField   = Object.keys(sorter)[0]
  vm.sortOrder   = sorter[Object.keys(sorter)[0]] 
  vm.currentPage = vm.sortField.length == 0 ? params.page() : 1
  vm.pageSize    = params.count()
  return $http.get(get_service()).then(
    function(e){
      vm.posts = e.data.posts
      params.total(vm.totalPosts)
      return vm.posts
    },
    function(e){
      console.error(e)
    }
  )
}
person alex    schedule 10.03.2017

arrow_upward
0
arrow_downward

Добавьте ngTable туда, где вы объявили свой модуль приложения. Вот так: angular.module("myApp", ["ngTable"]);

Затем используйте NgTableParams.sorting() http://ng-table.com/#/sorting/demo-sorting-basic

person taiwoorogbangba    schedule 16.08.2016
comment
Как применить sorting() к данным? На веб-сайте, похоже, нет примера для этого случая. - person ddd; 17.08.2016
comment
@ddd, для этого вы используете orderBy. docs.angularjs.org/api/ng/filter/orderBy scotch.io/tutorials/sort-and-filter-a-table-using -angular w3schools.com/angular/ng_filter_orderby.asp - person taiwoorogbangba; 17.08.2016