What surprises me is, though at that spot are a lot of ui frameworks, available production cook made components are lacking compared to primefaces.
Let the code verbalize for itself. Note though that I didn't exercise typescript silent since ngTable doesn't accept a documentation silent on its website.
Also discovery that the master copy spider web service that I exercise supported paging together with sorting, that's why I accept only about extra parameters inwards the request: Page, RecsOnPage together with SortBy. I did non bother to provider customer side paging because it's already inwards the docs together with is slow 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 = novel NgTableParams({ page: 1, // exhibit get-go page count: 10 // count per page }, { total: 0, // length of information getData: function(params) { var sortNameValue = ""; for (var keyName inwards params.sorting()) { sortNameValue = keyName; sortNameValue = sortNameValue + "_" + params.sorting()[keyName]; } render 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); // laid full for recalc pagination render 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 hope = $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); }); render promise.then(function(result) { render result; }); } } render 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 inwards $data"> <td data-title="How to practice a information tabular array inwards angular using ngTable" sortable="'name'">{{ x.name }}</td> <td data-title="How to practice a information tabular array inwards angular using ngTable" sortable="'alpha2_code'">{{ x.alpha2_code }}</td> <td data-title="How to practice a information tabular array inwards angular using ngTable" sortable="'alpha3_code'">{{ x.alpha3_code }}</td> </tr> </tbody> </table> </div> </div> </body> </html> Code is likewise available hither for easier download: https://github.com/czetsuya/AngularNgTable
Maybe side past times side article is close using typescript :-)
References:
http://ng-table.com/
0 komentar:
Please comment if there are any that need to be asked.