227 lines
9.2 KiB
HTML
Executable File
227 lines
9.2 KiB
HTML
Executable File
<!-- 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="">« Previous</a>
|
|
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next »</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="ngTableCtrl3s">
|
|
<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">
|
|
<tbody ng-repeat="p in $data">
|
|
<tr id="tr{{p.id}}" ng-class-odd="'odd'" ng-class-even="'even'">
|
|
<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 -->
|