angular-data-grid
Version:
Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, seamless synchronization with browser address bar and total freedom in mark-
224 lines (213 loc) • 10.8 kB
HTML
<!-- index.html -->
<html ng-app="myApp">
<head>
<style>
.sortable:after {
font: 14px/1 FontAwesome;
content: "\f0dc";
}
.sortable.sort-ascent:after {
content: '\f0de';
vertical-align: bottom;
}
.sortable.sort-descent:after {
content: "\f0dd";
vertical-align: top;
}
</style>
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
<link rel="stylesheet" href="css/loading-bar.min.css">
</head>
<body ng-controller="myAppController">
<nav class="navbar navbar-inverse">
<div class="container">
<a href="#" class="navbar-brand">Angular Data Grid - Server Pagination</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Back to main demo</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="margin-bottom-basic">
<h3>Angular Data Grid Server Pagination</h3>
Features enabled: sorting, filtering (using both in-grid and external controls), pagination and items-per-page functionality.
Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
</div>
<hr>
<div class="row">
<div>
<div class="col-md-4">
<div class="form-group">
<label for="orderIdFilter">Search by Order #</label>
<input id="orderIdFilter" type="text" class="form-control order-search-box"
placeholder="Enter Order #"
ng-change="gridActions.filter()"
ng-model="orderNo"
filter-by="orderNo"
filter-type="text">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="dateFromFilter">Date From</label>
<div class="input-group">
<input type="text"
id="dateFromFilter"
class="form-control"
uib-datepicker-popup="dd/MM/yyyy"
placeholder="DD/MM/YYYY"
max-date="dateTo"
close-text="Close"
ng-model="dateFrom"
show-weeks="true"
is-open="dateFromOpened"
ng-click="dateFromOpened = true"
filter-by="placed"
filter-type="dateFrom"
ng-blur="gridActions.filter()"
ng-focus="gridActions.filter()"
show-weeks="false"
close-text="Close"/>
<span class="input-group-btn">
<label for="dateFromFilter" class="btn btn-default">
<i class="fa fa-calendar"></i></label>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="dateToInput">Date To</label>
<div class="input-group">
<input type="text"
id="dateToInput"
class="form-control"
uib-datepicker-popup="dd/MM/yyyy"
placeholder="DD/MM/YYYY"
min-date="dateFrom"
close-text="Close"
ng-model="dateTo"
show-weeks="true"
is-open="dateToOpened"
ng-click="dateToOpened = true"
filter-by="placed"
filter-type="dateTo"
ng-blur="gridActions.filter()"
ng-focus="gridActions.filter()"
show-weeks="false"
close-text="Close">
<span class="input-group-btn">
<label for="dateToInput" class="btn btn-default">
<i class="fa fa-calendar"></i></label>
</span>
</div>
</div>
<div ng-show="dateTo || dateFrom" class="buttons-right">
<a href="" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</a>
</div>
</div>
</div>
</div>
<div grid-data grid-options="gridOptions" grid-actions="gridActions" server-pagination="true">
<div class="row">
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
<div class="col-md-9 text-right">
<form class="form-inline margin-bottom-basic">
<div class="form-group">
<div grid-pagination boundary-links="true"
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
class="pagination-sm"
items-per-page="paginationOptions.itemsPerPage">
</div>
</div>
<div class="form-group items-per-page">
<label for="itemsOnPageSelect1">Items per page:</label>
<select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
ng-change="reloadGrid()">
<option>5</option>
<option>10</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th width="30%" sortable="orderNo" class="sortable">Order # </th>
<th width="30%" sortable="datePlaced" class="sortable">Date Placed </th>
<th class="st-sort-disable th-dropdown">
<select class="form-control width-15"
filter-by="status"
filter-type="select"
ng-model="status"
ng-change="filter()">
<option value="">All Statuses</option>
<option ng-repeat="option in UI.statusOptions track by option.value"
value="{{option.value}}">{{option.text}}
</option>
</select>
</th>
<th sortable="total" class="sortable">Total </th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td>{{item.orderNo}}</td>
<td>{{item.datePlaced | date:'MM/dd/yyyy'}}</td>
<td>{{item.status}}</td>
<td>{{item.total}}</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
<div class="col-md-9 text-right">
<form class="form-inline margin-bottom-basic">
<div class="form-group">
<div grid-pagination boundary-links="true"
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
class="pagination-sm"
items-per-page="paginationOptions.itemsPerPage">
</div>
</div>
<div class="form-group items-per-page">
<label for="itemsOnPageSelect">Items per page:</label>
<select id="itemsOnPageSelect" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
ng-change="reloadGrid()">
<option>5</option>
<option>10</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="../../dist/pagination.min.js"></script>
<script src="../../dist/dataGrid.min.js"></script>
<script src="../../dist/loading-bar.min.js"></script>
<script src="js/serverPaginationApp.js"></script>
</html>