Merge remote-tracking branch 'origin/master'

Author: IvanBisultanov

demo/bootstrap/css/angular-data-grid.bootstrap.css

@@ -1,20 +1,30 @@
 .table > thead > tr > th {
-  vertical-align: middle; }
+    vertical-align: middle;
+}
 
 .margin-bottom-basic {
-  margin-bottom: 15px; }
+    margin-bottom: 15px;
+}
 
 .pagination {
-  margin: 0 0 15px 0; }
+    margin: 0;
+}
+
+.items-per-page {
+    margin-left: 15px;
+}
 
 .sortable:after {
-  font: 14px/1 FontAwesome;
-  content: "\f0dc"; }
+    font: 14px/1 FontAwesome;
+    content: "\f0dc";
+}
 
 .sortable.sort-ascent:after {
-  content: '\f0de';
-  vertical-align: bottom; }
+    content: '\f0de';
+    vertical-align: bottom;
+}
 
 .sortable.sort-descent:after {
-  content: "\f0dd";
-  vertical-align: top; }
+    content: "\f0dd";
+    vertical-align: top;
+}

demo/bootstrap/scss/angular-data-grid.bootstrap.scss

@@ -7,7 +7,11 @@
 }
 
 .pagination {
-  margin: 0 0 15px 0;
+  margin: 0;
+}
+
+.items-per-page {
+  margin-left: 15px;
 }
 
 .sortable {

index.html

@@ -31,7 +31,7 @@
 <div class="container">
     <div>
         <h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
-        Features enabled: sorting, filtering (using both in-grid and external controls), pagination and item-per-page functionality.
+        Features enabled: sorting, filtering (using both in-grid and external controls), pagination and items-per-page functionality.
         Angular UI Datepickers used for date controls, although you can use any other framework / plugins.
         <a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
     </div>
@@ -123,14 +123,26 @@ <h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
                         <span class="items">{{filtered.length}} items total</span>
                     </div>
                     <div class="col-md-9 text-right">
-                        <grid-pagination max-size="5"
-                                         boundary-links="true"
-                                         class="pagination-sm"
-                                         ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
-                                         total-items="paginationOptions.totalItems"
-                                         ng-model="paginationOptions.currentPage"
-                                         ng-change="reloadGrid()"
-                                         items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
+                        <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">
@@ -168,30 +180,26 @@ <h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
                     </tr>
                     </tbody>
                 </table>
-                <div class="text-right">
-                    <grid-pagination max-size="5"
-                                     boundary-links="true"
-                                     class="pagination-sm"
-                                     ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
-                                     total-items="paginationOptions.totalItems"
-                                     ng-model="paginationOptions.currentPage"
-                                     ng-change="reloadGrid()"
-                                     items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
-                </div>
-                <form class="form-inline">
-                    <div class="form-group pull-right">
-                        <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()">
+                <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 class="text-right">-->
-                <!--<span grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></span>-->
-                <!--</div>-->
             </div>
         </div>
     </div>