Ng-table: Пример сортировки, фильтрации, группировки и разбивки на страницы на стороне сервера ...

+1

+1

Привет, ng-table, это всего лишь клиентская библиотека, серверную часть вы можете сделать как хотите. Например, вы можете посмотреть эту часть кода https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37 -87

@esvit - Запрос был для полномасштабного примера ng-table, обрабатывающего страницы на стороне сервера, сортировки, группировки, фильтрации и т. д. Я согласен с тем, что ng-table является клиентской библиотекой, но такой пример действительно поможет, потому что много сценариев предполагает использование этой клиентской библиотеки с удаленными данными ...

@esvit да, все, что мы хотели бы, это что-то показывающее, как _должно_ это делать, т.е. что ожидает объект JSON ng-table?

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

отличная библиотека, кстати ...

+1

+1

+1

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

Либо введите ng-click = "sort (vars, directionToggle)" в заголовок, и вы даже можете оставить сортировку включенной. Затем он будет правильно отображать стрелки, пока ваш переключатель направления совпадает с переключением.
Фильтрация немного сложнее, я бы сказал, что нужно отключить фильтрацию ng-таблицы и добавить полностью настраиваемый ввод фильтра в заголовок, тогда вам не нужно беспокоиться о слиянии ng-таблицы.

Отсюда все дело в работе с вашими внутренними данными и обеспечении того, чтобы они отправляли вам правильные данные в правильном порядке. Затем просто подключите эти данные и бац, у вас будет таблица сортировки / фильтрации ajax.

+1

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

    $scope.tableParams = new ngTableParams({
      page: 1, count: 10
    }, {
      getData: function($defer, params) {
        var receiveData = function(data, responseHeaders) {
          // in my case, the server returns the total number of rows as a response header
          // call params.total(...) to tell ng-table the total number of rows
          params.total(responseHeaders("count"));

          // the server returns just the data for the current page, so can send it as is
          $defer.resolve(data);
        };

        // getData gets called when you click on a different page in the pagination links.
        // get the page number and size from params.$params
        var pageNumber = params.$params.page;
        var pageSize = params.$params.count;

        // set up the query parameters as expected by your server
        var queryParams = {"paging.pageSize":pageSize, "paging.pageNumber":pageNumber};

        // send an ajax request to your server. in my case MyResource is a $resource.
        MyResource.query(queryParams, receiveData);
      }
    });

Надеюсь, что это кому-то поможет.
фоксдонат

+1

+1

+1

действительно хорошо

Я знаю, что уже немного поздно, но кто-то сделал действительно хороший пример отображения данных, отсортированных на стороне сервера:
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

Я не знал, что мы сможем это сделать. В документации это не так ясно. :(

Привет, фоксдонат,
Ваш комментарий действительно помогает, но поскольку я новичок, некоторые вещи мне не понятны
1 # Почему receiveData передается в качестве аргумента функции.
Когда я вызываю свою функцию ajax вместо
MyResource.query (queryParams, receiveData);
он показывает данные, но поскольку ajax возвращается позже, счетчик не обновляется. И если я использую перезагрузку внутри кода ajax, он переходит в бесконечный цикл :(

Привет @ rbhargava25

Почему receiveData передается в качестве аргумента функции.

Поскольку MyResource.query - асинхронная функция. Он делает запрос к серверу, и когда ответ вернется, нам нужно знать, какой код выполнить. В данном случае это вызов _callback function_, который равен receiveData .

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

Большое спасибо Foxdonut ...
Я буду использовать простой HTTP-запрос вместо ресурса. Я надеюсь, что он будет работать.