How to create a data table in angular using ngTable

     No comments
I'm trying to evaluate front end frameworks since it's becoming more and more popular lately (I'm more of a backend developer using primefaces). And so I'm looking at angular2 and react, but in this tutorial we will be trying to develop a data table from angular2.

What surprises me is, though there are a lot of ui frameworks, available production ready made components are lacking compared to primefaces.

Let the code talk for itself. Note though that I didn't use typescript yet since ngTable doesn't have a documentation yet on its website.

Also notice that the original web service that I use supported paging and sorting, that's why I have some extra parameters in the request: Page, RecsOnPage and SortBy. I did not bother to provider client side paging because it's already in the docs and is easy to understand.

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    <script src="https://unpkg.com/angular@1.5.5/angular.js"></script>
    <script src="https://unpkg.com/ng-table@3.0.1/bundles/ng-table.min.js"></script>

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"></link>
    <link href="https://unpkg.com/ng-table@3.0.1/bundles/ng-table.min.css" rel="stylesheet"></link>

    <script>
        var app = angular.module('ngTableTest', ['ngTable']);

        app.controller("mainController", function($scope, NgTableParams, mainControllerService) {
            console.debug('mainController.init');

            $scope.tableParams = new NgTableParams({
                page: 1, // show first page
                count: 10 // count per page
            }, {
                total: 0, // length of data
                getData: function(params) {
                    var sortNameValue = "";
                    for (var keyName in params.sorting()) {
                        sortNameValue = keyName;
                        sortNameValue = sortNameValue + "_" + params.sorting()[keyName];
                    }
                    return mainControllerService.getData(params.page(), params.count(), sortNameValue).then(function(data) {
                        console.debug("data received length=" + data.data.RestResponse.result.length);
                        params.total(data.data.RestResponse.result.length); // set total for recalc pagination
                        return data.data.RestResponse.result;
                    });
                }
            });

            console.log('mainController.end');
        });

        app.service("mainControllerService", function($http) {
            console.debug('mainControllerService.init');

            var service = {
                cachedData: [],
                getData: function(page, count, sorting) {
                    console.debug("fetching page=" + page + ", count=" + count + ", sorting=" + JSON.stringify(sorting));
                    var params = {
                        Page: page,
                        RecsPerPage: count,
                        SortBy: sorting
                    };
                    var config = {
                        params: params
                    }
                    var promise = $http.get("http://services.groupkt.com/country/get/all", config)
                        .success(function(response) {
                            console.debug('downloaded ' + response.RestResponse.result.length + ' records');
                            angular.copy(response.RestResponse.result, service.cachedData);
                        });
                    return promise.then(function(result) {
                        return result;
                    });
                }
            }

            return service;
        });
    </script>
</head>

<body>
    <div ng-app="ngTableTest" ng-controller="mainController">
        <div loading-container="tableParams.settings().$loading">
            <table class="table table-condensed table-bordered table-striped" ng-table="tableParams" showfilter="false">
                <tbody>
<tr ng-repeat="x in $data">
                        <td data-title="'Name'" sortable="'name'">{{ x.name }}</td>
                        <td data-title="'Alpha2 Code'" sortable="'alpha2_code'">{{ x.alpha2_code }}</td>
                        <td data-title="'Alpha3 Code'" sortable="'alpha3_code'">{{ x.alpha3_code }}</td>
                    </tr>
</tbody>
            </table>
</div>
</div>
</body>

</html>

Code is also available here for easier download: https://github.com/czetsuya/AngularNgTable

Maybe next article is about using typescript :-)

References:
http://ng-table.com/

0 nhận xét:

Đăng nhận xét