Tutorial: ng-table with infinite scroll

I’ve already showed in this blog how to create a basic datatable with ng-table, for those who didn’t see it yet, just click on the link. This tutorial will just be a complement to the previous one, the difference is that instead of using pagination I’m going to use infinite scroll, and don’t worry, I’ll also keep the sorting and filtering features.

So before we start let’s just put the links to every script we need, your index.html should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html ng-app="ngTableTutorial">
    <head>
        <title>ng-table with infinite scroll</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
        <script src="https://raw.githubusercontent.com/BinaryMuse/ngInfiniteScroll/1.0.0/build/ng-infinite-scroll.min.js"></script>
        <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
 
        <script src="app/resources/js/app.js" type="text/javascript"></script>
        <link href="app/resources/css/style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body style="padding: 50px">
        <div ng-controller="tableController">
        </div>
    </body>
</html>

As you can see I just put the links to: JQuery, Angular, bootstrap, ng-table and ngInfiniteScroll. There’s also the app.js and style.css, which I created to put my code on them.

Note that the body is still empty for now, let’s leave it like this and open our app.js, the first thing we need to do is to create our angular module and controller, just copy the following code to your app.js:

1
2
3
4
angular.module('ngTableTutorial', ['ngTable','infinite-scroll'])
        .controller('tableController', function ($scope, $filter, ngTableParams) {
        }
);

Don’t forget to declare the ngTable and infinite-scroll as dependencies, we’re going to use them later. This code is still very simple, I just created a module called ngTableTutorial, if you go back to the index.html code you’ll see that the ng-app=”ngTableTutorial” is already there in the html tag, and I also created a controller called tableController, again if go to the index.html there will be a div inside our body with the attribute ng-controller=”tableController”.

Now we need some data to be displayed to the table, I personally like mockaroo to generate random data, but feel free to generate it as you like, you’ll need about 1000 rows for this tutorial, after you generate it, just put it in a variable inside you controller, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$scope.users =
        [{
                "id": 1,
                "first_name": "Theresa",
                "last_name": "Morris",
                "email": "tmorris0@myspace.com",
                "country": "Indonesia",
                "ip_address": "143.220.154.199"
            }, {
                "id": 2,
                "first_name": "Steve",
                "last_name": "Gray",
                "email": "sgray1@nytimes.com",
                "country": "Norway",
                "ip_address": "163.199.165.94"
            }
           .
           .
           .
            {
                "id": 1000,
                "first_name": "Gloria",
                "last_name": "West",
                "email": "gwest2@go.com",
                "country": "China",
                "ip_address": "16.171.225.220"
            }
];

Now that we have the data we’re ready to create our table, copy the table bellow inside your div with the ng-controller attribute:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table infinite-scroll="getMoreData()" ng-table="tableParams" show-filter="true" class="table table-striped">
    <tr ng-repeat="user in data">
        <td data-title="'Id'" sortable="'id'">
            {{user.id}}
        </td>
        <td data-title="'First Name'" sortable="'first_name'" filter="{ 'first_name': 'text' }">
            {{user.first_name}}
        </td>
        <td data-title="'Last Name'" sortable="'last_name'" filter="{ 'last_name': 'text' }">
            {{user.last_name}}
        </td>    
        <td data-title="'e-mail'" sortable="'email'">
            {{user.email}}
        </td>    
        <td data-title="'Country'" sortable="'country'">
            {{user.country}}
        </td>    
        <td data-title="'IP'" sortable="'ip_address'">
            {{user.ip_address}}
        </td>    
    </tr>
</table>

Each column is displaying one attribute of our JSON, I put the attribute sortable and filter in some of them to add the sorting and filtering features to the datatable (to show the filter you also have to put show-filter=”true” in your table). But what is important here is the attributes ng-table=”tableParams” and infinite-scroll=”getMoreData()” from the table, the first is binding the table to the tableParams variable in our controller (I’m still going to create this variable), and the second attribute receives the method that will be called when the user reaches the bottom of the page, that’s the method that will make our infinite scroll work.

Now the only thing left for us to do is to create our tableParams and implement the getMoreData() method, copy the following code bellow our JSON in your controller:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$scope.tableParams = new ngTableParams({
    page: 1,
    count: $scope.users.length
}, {
    counts: [],
    total: 1,
    getData: function ($defer, params) {
        $scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
        $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
        $scope.data = $scope.data.slice(0, 20);
        $defer.resolve($scope.data);
    }
});
 
$scope.getMoreData = function () {
    $scope.data = $scope.users.slice(0, $scope.data.length + 20);
}

In this code we are instantiating the ngTableParams, the fist object it receives as a parameter is just defining that the current page is 1 and setting the row count, but what really matters here is the function getData, it will be called on the table initialization and also every time we sort or filter it, the lines 8 and 9 contains the logic to sort and filter the data, note that in line 10 I’m getting only the first 20 rows of our data, I’m doing this because every time this method is called, or the user will be filtering the data or he’ll be sorting it, both actions require him to be on the top of the page, thus I don’t need to show more than 20 rows.

Ok, now we just need to load more rows when he reaches the bottom of the pages, take a look at line 16, it’s just adding 20 more rows to our data, note that I’m using 2 variables here: $scope.data and $scope.users. The last one contains our original data, we cannot modify it, otherwise we’ll lose the data, that’s why we need an auxiliary variable, just to manipulate the data.

That’s it, now if you run your project you should see the following result:

ngTable with Infinite scroll
ng-Table with infinite scroll

As you scroll down you’ll see that the scroll bar will get smaller and smaller.

Tutorial: Basic DataTable (sorting, filtering and pagination) with AngularJS and ng-Table

In this tutorial I’m going to show you how to create a simple DataTable with some basic features, which are sorting, filtering and pagination. To accomplish this I’m going to use AngularJS with the module ng-Table.

First we need to create our project, after doing it, no matter your folder structure, you should have a html file to host your table (I’m going to use index.html) and also a js file to put your angular code (app.js).

Initially they should look like this:

Index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html ng-app="ngTableTutorial">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
        <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
        <link href="app/resources/css/style.css" rel="stylesheet" type="text/css"/>
        <script src="app/resources/js/app.js" type="text/javascript"></script>
    </head>
    <body>
        <div ng-controller="tableController">
 
        </div>
    </body>
</html>

app.js

1
2
3
4
5
angular.module('ngTableTutorial', ['ngTable'])
        .controller('tableController', function ($scope, $filter, ngTableParams) {
 
            });
        });

I’ve already referenced all the js and css files we’re going to use, and as you can see, I have also defined the angular module and controller. This is our initial project structure, if you run it, since we didn’t added anything yet, you’ll just see a blank page on your browser.

Now let’s get started with our table, the first thing we need is some data display on it, since we’re not using a database for this tutorial, a static JSON will do the job (You can use the website mockaroo to generate some data to test your app). After you get the data you can store it in a variable on your controller, your code should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
angular.module('ngTableTutorial', ['ngTable'])
        .controller('tableController', function ($scope, $filter, ngTableParams) {
 
            $scope.users = [{"id":1,"first_name":"Philip","last_name":"Kim","email":"pkim0@mediafire.com","country":"Indonesia","ip_address":"29.107.35.8"},
                        {"id":2,"first_name":"Judith","last_name":"Austin","email":"jaustin1@mapquest.com","country":"China","ip_address":"173.65.94.30"},
                        {"id":3,"first_name":"Julie","last_name":"Wells","email":"jwells2@illinois.edu","country":"Finland","ip_address":"9.100.80.145"},
                        {"id":4,"first_name":"Gloria","last_name":"Greene","email":"ggreene3@blogs.com","country":"Indonesia","ip_address":"69.115.85.157"},
                        .
                        .
                        .
                        {"id":50,"first_name":"Andrea","last_name":"Greene","email":"agreene4@fda.gov","country":"Russia","ip_address":"128.72.13.52"}];
 
            });
        });

With the data available we can now start creating our table on the index.html, the first feature we’re going to implement will be the pagination, although it’s getting old, I’m going to use it anyway for this tutorial, but I strongly recommend you to create a table with infinite scroll, I’ll show you how to do that in another tutorial.

To create the table just put the following code inside your div tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table ng-table="usersTable" class="table table-striped">
   <tr ng-repeat="user in data">
       <td data-title="'Id'" >
           {{user.id}}
       </td>
       <td data-title="'First Name'" >
           {{user.first_name}}
       </td>
       <td data-title="'Last Name'" >
           {{user.last_name}}
       </td>    
       <td data-title="'e-mail'" >
           {{user.email}}
       </td>    
       <td data-title="'Country'">
           {{user.country}}
       </td>    
       <td data-title="'IP'" >
           {{user.ip_address}}
       </td>    
   </tr>
</table>

This is the table structure with all the available columns of our JSON, if your data has different columns you just have to change their names in the td tag. An important thing to note is that I didn’t use our users variable in the ng-repeat, later I will explain why.

Also note that I’ve already defined the ng-table attribute in the table tag, now we have to declare it on the app.js, copy this code and put it below the $scope.users declaration:

1
2
3
4
5
6
7
8
9
10
$scope.usersTable = new ngTableParams({
                page: 1,
                count: 10
            }, {
                total: $scope.users.length, 
                getData: function ($defer, params) {
                    $scope.data = $scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    $defer.resolve($scope.data);
                }
            });

All I’m doing is defining the page size and also the initial page, this is done by the ‘count’ and ‘page’ attributes respectively. But the most important thing here is the getData function, it will be called every time you refresh our table, in other words, every time you filter, paginate or sort our data. Since our only feature is pagination for now, the getData function will only be responsible to get from the $scope.users the data displayed on our current page, I’ve used the splice function for that and stored the results in my auxiliary variable $scope.data (I couldn’t use the $scope.users because it would override my initial data).

If you run your project this will be the result:

ng-TableWithPagination
ng-Table with pagination

Now let’s add the sort functionality to the table, in your index.html just add the attribute sortable to the columns. Here is one example:

1
2
3
<td data-title="'Id'" sortable="'id'">
    {{user.id}}
</td>

You also need to change a little bit the getData function:

1
2
3
4
5
getData: function ($defer, params) {
   $scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
   $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
   $defer.resolve($scope.data);
}

I just added the first line which is responsible for sorting the data before slicing and returning it.

The last feature we’re going to add is the filter, as we did for the sorting functionality we’re just going to add one more attribute to the columns, the ‘filter’:

1
2
3
<td data-title="'First Name'" sortable="'first_name'" filter="{ 'first_name': 'text' }">
  {{user.first_name}}
</td>

For enable filtering we also have to put the attribute show-filter on the table:

1
<table ng-table="usersTable" show-filter=”true” class="table table-striped">

And lastly, add one more line to the getData function, which will be responsible for filtering our data:

1
2
3
4
5
6
getData: function ($defer, params) {
   $scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;
   $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
   $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
   $defer.resolve($scope.data);
}

if you run your project you’ll see the final result:

ng-Table with sort, filter and pagination features
ng-Table with sort, filter and pagination features

That’s it, now we have our datatable with sorting, filtering and pagination.
Hope this tutorial was helpful for you.
Till next time!

Related Posts:
Tutorial: Implementing Infinite Scroll with AngularJS and ngInfiniteScroll
Tutorial: Creating Reusable Code with AngularJS Directives