Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scroll Infinite in ngTable #560

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Conversation

brunoosilva
Copy link

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

Implementation de scrolling infinite in ngTable. Not jQuery or plugins,
native AngularJS.
@brunoosilva brunoosilva mentioned this pull request Mar 2, 2015
@iyeldinov
Copy link
Collaborator

@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
Copy link
Author

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

@ndoulgeridis
Copy link

Any news about this feature?

@Iyel pull request files to scroll infinite, in src files. Sorry!
@brunoosilva
Copy link
Author

@Crash21,

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

Ops, missing some files!
@christianacca
Copy link
Collaborator

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
Copy link
Collaborator

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

@realrogerrt
Copy link

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants