Sunday, 20 August 2017

AngularJS Material DataTable

HTML



<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <!-- style sheet -->
    <script src="app.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
</head>
<body ng-controller="myController" layout="column" ng-init="loadData()">
    <!--<md-toolbar class="md-whiteframe-1dp">
        <div class="md-toolbar-tools">
            <div class="md-title">Material Design Data Table</div>
        </div>
    </md-toolbar>-->

    <md-card>
        <md-toolbar class="md-table-toolbar md-default" ng-hide="options.rowSelection && selected.length">
            <div class="md-toolbar-tools">                
                <span>
                    <md-icon>
                        <img src="https://material.angularjs.org/latest/img/icons/angular-logo.svg" alt="Alternate Text" />
                    </md-icon>
                </span>
                &nbsp;
                <span>AngularJS DataTable</span>

                <div flex></div>   
                <md-button class="md-icon-button" ng-click="loadStuff()">
                    <md-icon>refresh</md-icon>
                </md-button>
            </div>
        </md-toolbar>        

        <!--<md-toolbar class="md-table-toolbar alternate" ng-show="options.rowSelection && selected.length">
            <div class="md-toolbar-tools">
                <span>{{selected.length}} {{selected.length > 1 ? 'items' : 'item'}} selected</span>
            </div>
        </md-toolbar>-->
        <md-table-container>
            <table md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" md-progress="promise">
                <thead md-head md-order="query.order" md-on-reorder="logOrder">
                    <tr md-row>
                        <th md-column md-order-by="Id">
                            <span>Id</span>
                        </th>
                        <th md-column md-order-by="CompanyName">
                            <span>CompanyName</span>
                        </th>
                        <th md-colu
                        <th md-column>
                            <span>ContactName</span>
                        </th>
                        <th md-column>
                            <span>ContactTitle</span>
                        </th>
                        <th md-column>
                            <span>Address</span>
                        </th>
                        <th md-column>
                            <span>City</span>
                        </th>
                        <th md-column>
                            <span>PostalCode</span>
                        </th>
                        <th md-column>
                            <span>Country</span>
                        </th>
                        <th md-column>
                            <span>Phone</span>
                        </th>
                        <th md-column>
                            <span>Fax</span>
                        </th>
                    </tr>
                </thead>
                <tbody md-body>
                    <tr md-row ng-repeat="cust in customers| filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
                        <td md-cell>{{cust.Id}}</td>
                        <td md-cell>{{cust.CompanyName}}</td>
                        <td md-cell>{{cust.ContactName}}</td>
                        <td md-cell>{{cust.ContactTitle}}</td>
                        <td md-cell>{{cust.Address}}</td>
                        <td md-cell>{{cust.City}}</td>
                        <td md-cell>{{cust.PostalCode}}</td>
                        <td md-cell>{{cust.Country}}</td>
                        <td md-cell>{{cust.Phone}}</td>
                        <td md-cell>{{cust.Fax}}</td>
                    </tr>
                </tbody>
            </table>
        </md-table-container>

        <md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{customers.length}}" md-page-select="options.pageSelect" md-boundary-links="options.boundaryLinks" md-on-paginate="logPagination"></md-table-pagination>
    </md-card>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <script src="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
</body>
</html>

app.js 

'use strict'

var app = angular.module('myApp', ['ngMaterial', 'md.data.table'])

.config(['$mdThemingProvider', function ($mdThemingProvider) {
    'use strict';

    $mdThemingProvider.theme('primary')
      .primaryPalette('blue');
}])

.controller('myController', ['$mdEditDialog', '$q', '$scope', '$timeout', '$http', '$interval', function ($mdEditDialog, $q, $scope, $timeout, $http, $interval) {
    $scope.selected = [];
    $scope.limitOptions = [5, 10, 15];

    $scope.customers = [];

    $scope.options = {
        rowSelection: true,
        multiSelect: true,
        autoSelect: true,
        decapitate: false,
        largeEditDialog: false,
        boundaryLinks: false,
        limitSelect: true,
        pageSelect: true
    };

    $scope.query = {
        order: 'Id',
        limit: 5,
        page: 1
    };


    $scope.loadData = function () {       
        $http.get('http://northwind.servicestack.net/customers.json').success(function (response) {
            debugger;
            $scope.customers = response.Customers;
        }).error(function (error) {
            alert(JSON.stringify(error));
        })
    }

    $interval(function () {
        $scope.promise = $timeout(function () {
            $http.get('http://northwind.servicestack.net/customers.json').success(function (response) {
                debugger;
                $scope.customers = response.Customers;
            }).error(function (error) {
                alert(JSON.stringify(error));
            })
        }, 2000);      
    }, 10000);

    $scope.toggleLimitOptions = function () {
        $scope.limitOptions = $scope.limitOptions ? undefined : [5, 10, 15];
    };

  
    $scope.loadStuff = function () {
        $scope.promise = $timeout(function () {
            // loading
        }, 2000);
    }

    $scope.logItem = function (item) {
        console.log(item.name, 'was selected');
    };

    $scope.logOrder = function (order) {
        console.log('order: ', order);
    };

    $scope.logPagination = function (page, limit) {
        console.log('page: ', page);
        console.log('limit: ', limit);
    }
}])

 

Screen Shot



Posted by at

5 comments:

Subscribe to: Post Comments (Atom)