itsm-pc-handle/assets/views/table_data.html

<!-- start: PAGE TITLE -->
<section id="page-title">
    <div class="row">
        <div class="col-sm-8">
            <h1 class="mainTitle" translate="sidebar.nav.tables.DATA">{{ mainTitle }}</h1>
            <span class="mainDescription">This directive allow to liven your tables. It support sorting, filtering and pagination. Header row with titles and filters automatic generated on compilation step.</span>
        </div>
        <div ncy-breadcrumb></div>
    </div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: SIMPLE TABLE WITH PAGINATION -->
<div class="container-fluid container-fullw bg-white">
    <div class="row">
        <div class="col-md-12">
            <h5 class="over-title margin-bottom-15">Simple table <span class="text-bold">with pagination</span></h5>
            <!-- /// controller:  'ngTableCtrl' -  localtion: assets/js/controllers/ngTableCtrl.js /// -->
            <div ng-controller="ngTableCtrl">
                <p>
                    <strong>Page:</strong> {{tableParams.page()}}
                </p>
                <p>
                    <strong>Count per page:</strong> {{tableParams.count()}}
                </p>
                <table ng-table="tableParams" class="table table-striped">
                    <tr ng-repeat="user in $data">
                        <td data-title="'Name'">{{user.name}}</td>
                        <td data-title="'Alias'">{{user.alias}}</td>
                        <td data-title="'Publisher'">{{user.publisher}}</td>
                        <td data-title="'Gender'">{{user.gender}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- end: SIMPLE TABLE WITH PAGINATION -->
<!-- start: PAGINATION TEMPLATE -->
<div class="container-fluid container-fullw">
    <div class="row">
        <div class="col-md-12">
            <h5 class="over-title margin-bottom-15">Pagination <span class="text-bold">template</span></h5>
            <!-- /// controller:  'ngTableCtrl' -  localtion: assets/js/controllers/ngTableCtrl.js /// -->
            <div ng-controller="ngTableCtrl">
                <p>
                    <strong>Page:</strong> {{tableParams.page()}}
                </p>
                <p>
                    <strong>Count per page:</strong> {{tableParams.count()}}
                </p>
                <table ng-table="tableParams" class="table table-striped" template-pagination="custom/pager">
                    <tr ng-repeat="user in $data">
                        <td data-title="'Name'">{{user.name}}</td>
                        <td data-title="'Alias'">{{user.alias}}</td>
                        <td data-title="'Publisher'">{{user.publisher}}</td>
                        <td data-title="'Gender'">{{user.gender}}</td>
                    </tr>
                </table>
                <script type="text/ng-template" id="custom/pager">
                    <ul class="pager ng-cloak">
                        <li ng-repeat="page in pages" ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}" ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
                            <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
                            <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
                        </li>
                        <li>
                            <div class="btn-group">
                                <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
                                <button type="button" ng-class="{'active':params.count() == 25}" ng-click="params.count(25)" class="btn btn-default">25</button>
                                <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>
                                <button type="button" ng-class="{'active':params.count() == 100}" ng-click="params.count(100)" class="btn btn-default">100</button>
                            </div>
                        </li>
                    </ul>
                </script>
            </div>
        </div>
    </div>
</div>
<!-- end: PAGINATION TEMPLATE -->
<!-- start: TABLE WITH SORTING -->
<div class="container-fluid container-fullw bg-white">
    <div class="row">
        <div class="col-md-12">
            <h5 class="over-title margin-bottom-15">Table <span class="text-bold">with sorting</span></h5>
            <!-- /// controller:  'ngTableCtrl2' -  localtion: assets/js/controllers/ngTableCtrl.js /// -->
            <div ng-controller="ngTableCtrl2">
                <div class="row margin-bottom-10">
                    <div class="col-md-12">
                        <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">
							Clear sorting
						</button>
                    </div>
                </div>
                <strong>Sorting:</strong> {{tableParams.sorting()|json}}
                <table ng-table="tableParams" class="table table-striped">
                    <tr ng-repeat="user in $data">
                        <td data-title="'Name'" sortable="'name'">{{user.name}}</td>
                        <td data-title="'Alias'" sortable="'alias'">{{user.alias}}</td>
                        <td data-title="'Publisher'" sortable="'publisher'">{{user.publisher}}</td>
                        <td data-title="'Gender'" sortable="'gender'">{{user.gender}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- end: TABLE WITH SORTING -->
<!-- start: TABLE WITH FILTERS -->
<div class="container-fluid container-fullw">
    <div class="row">
        <div class="col-md-12">
            <h5 class="over-title margin-bottom-15">Table <span class="text-bold">with filters</span></h5>
            <!-- /// controller:  'ngTableCtrl3' -  localtion: assets/js/controllers/ngTableCtrl.js /// -->
            <div ng-controller="ngTableCtrl3">
                <strong>Filter:</strong> {{tableParams.filter()|json}}
                <table ng-table="tableParams" show-filter="true" class="table table-striped">
                    <tr ng-repeat="user in $data">
                        <td data-title="'Name'" filter="{ 'name': 'text' }"> {{user.name}} </td>
                        <td data-title="'Alias'">{{user.alias}}</td>
                        <td data-title="'Publisher'">{{user.publisher}}</td>
                        <td data-title="'Gender'">{{user.gender}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- end: TABLE WITH FILTERS -->
<!-- start: CELL AND ROW TEMPLATE -->
<div class="container-fluid container-fullw bg-white">
    <div class="row">
        <div class="col-md-6">
            <h5 class="over-title margin-bottom-15">Cell <span class="text-bold">Template</span></h5>
            <div class="panel panel-white">
                <div class="panel-body">
                    <!-- /// controller:  'ngTableCtrl4' -  localtion: assets/js/controllers/ngTableCtrl.js /// -->
                    <div ng-controller="ngTableCtrl4">
                        <div class="row margin-bottom-10">
                            <div class="col-md-12">
                                <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">
									Clear sorting
								</button>
                            </div>
                        </div>
                        <table ng-table="tableParams" class="table">
                            <tr ng-repeat="user in $data">
                                <td data-title="'Name'"> {{user.name}} </td>
                                <td data-title="'Alias'"> {{user.alias}} </td>
                                <td data-title="'Power'" sortable="'power'"><span ng-class="{ 'plus': user.power >= 50,'minus': user.power < 50 }">{{user.power}}</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <h5 class="over-title margin-bottom-15">Row <span class="text-bold">Template</span></h5>
            <div class="panel panel-white">
                <div class="panel-body">
                    <!-- /// controller:  'ngTableCtrl5' -  localtion: assets/js/controllers/ngTableCtrl.js /// -->
                    <div ng-controller="ngTableCtrl5">
                        <div class="row margin-bottom-10">
                            <div class="col-md-12">
                                <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">
									Clear sorting
								</button>
                            </div>
                        </div>
                        <table ng-table="tableParams" class="table">
                            <tr ng-repeat="user in $data" ng-class="{ 'info': user.power > 90 }">
                                <td data-title="'Name'"> {{user.name}} </td>
                                <td data-title="'Alias'"> {{user.alias}} </td>
                                <td data-title="'Power'" sortable="'power'"> {{user.power}} </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end: CELL AND ROW TEMPLATE -->
<!-- start: INLINE EDIT EXAMPLE -->
<div class="container-fluid container-fullw">
    <div class="row">
        <div class="col-md-12">
            <h5 class="over-title margin-bottom-15">Inline <span class="text-bold">edit example</span></h5>
            <!-- /// controller:  'ngTableCtrl6' -  localtion: assets/js/controllers/ngTableCtrl.js /// -->
            <div ng-controller="ngTableCtrl6">
                <div class="row margin-bottom-10">
                    <div class="col-md-12">
                        <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">
							Clear sorting
						</button>
                    </div>
                </div>
                <strong>Sorting:</strong> {{tableParams.sorting()|json}}
                <div class="table-responsive">
                    <table ng-table="tableParams" class="table">
                        <thead>
                            <th><input name="" type="checkbox" ng-value="$data" id="checkedAll"></th>
                            <th sortable="'id'">ID</th>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Description</th>
                            <th>Email</th>
                        </thead>
                        <tbody ng-repeat="p in $data">
                            <tr id="tr{{p.id}}" ng-class-odd="'odd'" ng-class-even="'even'">
                                <td class="rowTd"><input name="" type="checkbox" ng-value="p" id="checkedAll"></td>
                                <td class="rowTd" data-title="'ID'" sortable="'id'">{{p.id}}</td>
                                <td class="rowTd" data-title="'Firstname'" sortable="'fn'">{{p.fn}}</td>
                                <td class="rowTd" data-title="'Lastname'" sortable="'ln'">{{p.ln}}</td>
                                <td class="rowTd" data-title="'Description'" sortable="'dc'">{{p.dc}}</td>
                                <td class="rowTd" data-title="'Email'" sortable="'em'">{{p.em}}</td>
                                <td class="rowTd" data-title="'Phone'" sortable="'ph'">{{p.ph}}</td>
                                <td class="rowTd">
                                    <div class="pull-right margin-right-10">
                                        <input type=button class="btn btn-primary btn-o btn-sm" id="editRowBtn{{p.id}}" value="edit" ng-click="setEditId(p.id)">
                                    </div>
                                </td>
                            </tr>
                            <tr ng-show="editId===p.id" ng-if="editId===p.id">
                                <td colspan="7" ng-include src="'assets/views/editRow.html'"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end: INLINE EDIT EXAMPLE -->