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-
233 lines (229 loc) • 12.3 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Angular Data Grid - Multiple Grids</title>
<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">
</head>
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
<nav class="navbar navbar-inverse">
<div class="container">
<a href="#" class="navbar-brand">Angular Data Grid - Multiple Grids Example</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="../bootstrap/">Back to main demo</a></li>
</ul>
</div>
</nav>
<div class="container">
<div>
<h3>Angular Data Grid - Multiple Grids Example</h3>
You need to assign <code>id</code> attribute for each grid instance on a page to make them work simultaneously. If you use external filtering, assign <code>grid-id</code> to grid id and <code>ng-change</code> to associated
<code>gridActions</code> (see example below).
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<h2>First Grid</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="orderIdFilter">Search by User Name</label>
<input id="orderIdFilter" type="text" class="form-control order-search-box"
placeholder="Enter User Name"
ng-change="gridActions1.filter()"
ng-model="name"
filter-by="name"
grid-id="grid1"
filter-type="text">
</div>
</div>
</div>
<div grid-data id='grid1' grid-options="gridOptions1" grid-actions="gridActions1">
<div class="row">
<div class="col-md-12 text-right">
<form class="form-inline pull-right margin-bottom-basic">
<div class="form-group">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination-sm"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</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>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th sortable="id" class="sortable">
User Id
</th>
<th sortable='name' class="sortable">
Name
</th>
<th sortable='phone' class="sortable">
Phone
</th>
<th sortable="date" class="sortable">
Date Of Birth
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td width="30%" ng-bind="item.id"></td>
<td ng-bind="item.name"></td>
<td ng-bind="item.phone"></td>
<td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
</tr>
</tbody>
</table>
<form class="form-inline pull-right margin-bottom-basic">
<div class="form-group">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination-sm"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
<div class="form-group items-per-page">
<label for="itemsOnPageSelect2">Items per page:</label>
<select id="itemsOnPageSelect2" class="form-control input-sm"
ng-init="paginationOptions.itemsPerPage = '10'"
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<option>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Second Grid</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Search by User Name</label>
<input type="text" class="form-control order-search-box"
placeholder="Enter User Name"
ng-change="gridActions2.filter()"
ng-model="name2"
grid-id="grid2"
filter-by="name"
filter-type="text">
</div>
</div>
</div>
<div grid-data id="grid2" grid-options="gridOptions2" grid-actions="gridActions2">
<div class="row">
<div class="col-md-12 text-right">
<form class="form-inline pull-right margin-bottom-basic">
<div class="form-group">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination-sm"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
<div class="form-group items-per-page">
<label>Items per page:</label>
<select class="form-control input-sm"
ng-init="paginationOptions.itemsPerPage = '10'"
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<option>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th sortable="id" class="sortable">
User Id
</th>
<th sortable='name' class="sortable">
Name
</th>
<th sortable='phone' class="sortable">
Phone
</th>
<th sortable="date" class="sortable">
Date Of Birth
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td width="30%" ng-bind="item.id"></td>
<td ng-bind="item.name"></td>
<td ng-bind="item.phone"></td>
<td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
</tr>
</tbody>
</table>
<form class="form-inline pull-right margin-bottom-basic">
<div class="form-group">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination-sm"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
<div class="form-group items-per-page">
<label for="itemsOnPageSelect22">Items per page:</label>
<select id="itemsOnPageSelect22" class="form-control input-sm"
ng-init="paginationOptions.itemsPerPage = '10'"
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<option>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.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="../../dist/pagination.min.js"></script>
<script src="../../dist/dataGrid.min.js"></script>
<script src="js/multipleApp.js"></script>
</html>