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-
169 lines (164 loc) • 8.37 kB
HTML
<div class="container">
<div class="form-group">
<button class="btn btn-primary" ng-click="goToAnotherState()">Go to another state</button>
</div>
<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>