Scroll Infinite in ngTable

[brunoosilva]

Hello,

I managed to implement the "Scroll Infinite" in "ngTable", had little change in the current code, only adding a new "directive" and a new parameter "isPagination" that you guys can improve if possible.
Hope this helps everyone, because it helps the mobile also. Below is an explanation of how to use the new featured.

1 - In tag "<table>" add the attribute "ng-table-pagination-scroll", noting that the "ng-table" attribute is required.

<table ng-table="tableParams" show-filter="true" ng-table-pagination-scroll></table>

2 - If you want the loading, add after the table and remember to use the "$ scope.isLoading = true | false;" at the right times. The styles are preloaded, but feel free if you want to change them.

<div ng-show="isLoading" class="loading-indicator"></div>

3 - I leave below an example of call, to run the "Scroll Infinite", but feel free to improve.

<script>
    var app = angular.module('main', ['ngTable']).
    controller('DemoCtrl', function($scope, $filter, $http, NgTableParams) {
        $scope.data = []; // Start array empty and global
        $scope.tableParams = new NgTableParams({
            page: 1,            // show first page
            count: 15,           // count per page
            sorting: {
                name: 'asc'     // initial sorting
            }
        }, {
            counts: [],
            isPagination: false, // Important parameter to hide the default paging.
            getData: function($defer, params) {
                $scope.isLoading = true; 
                $http.get("api/", {params: params.url()}).then(function(data){
                    var total = data.data.total;
                    var items = data.data.items;                    
                    params.total(total);

                    /* This portion is important to push the array, as is used in the standard way, 
                    it recomonta list only with the stipulated amount. Then create a global array, and add the lines in it, 
                    can improve the code as it is a little bad for lack of time, but it works. */
                    if(items.length>0){
                        for(key in items){
                            $scope.data.push(items[key]);
                        }
                    }
                    $defer.resolve($scope.data);
                    $scope.isLoading = false;
                });
            }
        });
    })
    </script>

I hope you got something good in the library, and we can improve more and more. Sorry for my English horrible because I am Brazilian.

Hugs

[iyeldinov]

@brunoosilva hi, good work we appreciate it. But in order to merge your pull request you need to make changes to src files.

Thanks

[brunoosilva]

@Iyel , I did not, can you help me?

[ndoulgeridis]

Any news about this feature?

[brunoosilva]

@Crash21,

I not correct pull request in project, but now i mage a correct request, i hope.

[christianacca]

Hi @brunoosilva,

There are couple of pull requests (#560, #656) that point to the need to add more pager options. However, we need to refactor these existing one first.

Also your directive makes the existing pager options redundant for those apps that use infinite scroll.

It seems we need to separate out pager options and page generation logic from NgTableParams into "self-contained" directives that can have their own options...

Now, all we need is someone to take the lead on this and:

1. refactor existing options ie grouping them
2. move the generatePagesArray and options into ngTablePagination
3. update the existing demo(s)

C

[christianacca]

So looks like we have a bunch of options for pagination: #556, #555, #648, #656, #560 (this one), #454

[realrogerrt]

I want to try it out in my project, I cloned, and loaded your fork @brunoosilva in my project, how do I set it up to see it in action? Thanks

[brunoosilva]

@Rogerkael I left the above steps, how to use. Good luck