Ng-table: Example with server side sorting, filtering, grouping, and pagination...

+1

+1

Hi, ng-table this is only client library, server part you can make as you wish. For example you can look this part of code https://github.com/esvit/bazalt-rest/blob/master/src/Bazalt/Rest/Collection.php#L37-87

@esvit - The request was for a full blown example of the ng-table handling server side pagination, sorting, grouping, filtering, etc, etc. I agree that ng-table is client library, but such example would really help because a lot of scenarios involve using this client library with remote data...

@esvit yes all we would like is something showing how one _should_ do it, i.e. what JSON object ng-table expects?

+1
Even if only a way to intercept the clickevents of filtering, sorting and paging would help us to hook the rest up to the server... thanks

great library btw ...

+1

+1

+1

+1 if there is some nice way to call a custom function for sort but it's not needed.

Either put in a ng-click="sort(vars,directionToggle)" in the header and you can even leave sorting enabled. It will then display the arrows properly as long as your direction toggle matches it's toggle.
Filtering is slightly more complicated, I would say to disabled ng-table filtering and add a completely custom filter input to the header, then you don't need to worry about ng-table intergeneration.

From there, it's all about dealing with your backend data and making sure it's sending you the correct data in the correct order. Then just plug that data in and bam, you'll have a ajax sorting/filtering table.

+1

In case this is helpful to get started, here is an example for server-side pagination. The client sends the page number and page size to the server, and the server returns the rows of data just for that page, and the total number of rows as a response header.

    $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);
      }
    });

Hope that is helpful to someone.
foxdonut

+1

+1

+1

really good

I know it's a bit late but someone did a really good example of displaying server-side sorted data:
https://www.codeproject.com/Articles/892301/Server-side-Data-Filtering-Sorting-and-Paging-with

I didn't know we could do this. This isn't so clear in the documentation. :(

Hi foxdonut ,
You comment really help full, But as I am new few things are not clear to me
1# Why receiveData is being passed as a argument into a function.
When I am calling my ajax function instead of
MyResource.query(queryParams, receiveData);
it is showing data but as ajax returns later then count is not being refreshed. And if I am using reload inside the ajax code then it goes into infinte loop :(

Hi @rbhargava25

Why receiveData is being passed as a argument into a function.

Because MyResource.query is an asynchronous function. It is making a request to the server, and when the response comes back, we need to know what code to execute. In this case, it is to call the _callback function_, which is receiveData.

Hope that helps.

Great thanks Foxdonut...
I will using simple http request instead of Resource I am hopping that it will work.