|
13 | 13 | * <li>.itemsAvailable - (boolean) If 'false', displays the {@link patternfly.views.component:pfEmptyState Empty State} component. |
14 | 14 | * <li>.showCheckboxes - (boolean) Show checkboxes for row selection, default is true |
15 | 15 | * </ul> |
16 | | - * @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object. See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder} |
| 16 | + * @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object. Note: paginationType, displayLength, and dom:"p" are no longer being used for pagination, but are allowed for backward compatibility. |
| 17 | + * Please switch to prefered 'pageConfig' settings for pf pagination controls. |
| 18 | + * Other dtOptions can still be used, such as 'order' See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder} |
| 19 | + * @param {object} pageConfig Optional pagination configuration object. Since all properties are optional it is ok to specify: 'pageConfig = {}' to indicate that you want to |
| 20 | + * use pagination with the default parameters. |
| 21 | + * <ul style='list-style-type: none'> |
| 22 | + * <li>.pageNumber - (number) Optional Initial page number to display. Default is page 1. |
| 23 | + * <li>.pageSize - (number) Optional Initial page size/display length to use. Ie. Number of "Items per Page". Default is 10 items per page |
| 24 | + * <li>.pageSizeIncrements - (Array[Number]) Optional Page size increments for the 'per page' dropdown. If not specified, the default values are: [5, 10, 20, 40, 80, 100] |
| 25 | + * </ul> |
17 | 26 | * @param {array} items Array of items to display in the table view. |
18 | 27 | * @param {array} columns Array of table column information to display in the table's header row and optionaly render the cells of a column. |
19 | 28 | * <ul style='list-style-type: none'> |
|
86 | 95 | <pf-table-view config="tableConfig" |
87 | 96 | empty-state-config="emptyStateConfig" |
88 | 97 | dt-options="dtOptions" |
| 98 | + page-config="pageConfig" |
89 | 99 | columns="columns" |
90 | 100 | items="items" |
91 | 101 | action-buttons="tableActionButtons" |
92 | 102 | menu-actions="tableMenuActions"> |
93 | 103 | </pf-table-view> |
94 | 104 | </div> |
| 105 | + <hr class="col-md-12"> |
95 | 106 | <div class="col-md-12"> |
96 | 107 | <div class="form-group"> |
97 | 108 | <label class="checkbox-inline"> |
98 | 109 | <input type="checkbox" ng-model="tableConfig.itemsAvailable" ng-change="updateItemsAvailable()">Items Available</input> |
99 | 110 | </label> |
100 | | - <!-- //[WIP] issues dynamically changing displayLength and turning on/off pagination |
101 | | - <label class="checkbox-inline"> |
102 | | - <input type="checkbox" ng-model="usePagination" ng-change="togglePagination()">Use Pagination</input> |
103 | | - </label> |
104 | | - <label> |
105 | | - <input ng-model="dtOptions.displayLength" ng-disabled="!usePagination" style="width: 24px; padding-left: 6px;"> # Rows Per Page</input> |
106 | | - </label> --!> |
| 111 | + <!-- TODO: I don't know why this comment is neccesary, but if I remove it I get error: |
| 112 | + Error: [$compile:ctreq] Controller 'tabbable', required by directive 'tabPane', can't be found! |
| 113 | + I've wasted too much time trying to fix this! Something to do with ngDoc's <file> directives |
| 114 | + --!> |
107 | 115 | </div> |
108 | 116 | <div class="form-group"> |
109 | 117 | <label class="checkbox-inline"> |
110 | 118 | <input type="checkbox" ng-model="tableConfig.showCheckboxes" ng-change="addNewComponentToDOM()">Show Checkboxes</input> |
111 | 119 | </label> |
112 | 120 | </div> |
113 | 121 | </div> |
114 | | - <hr class="col-md-12"> |
115 | 122 | <div class="col-md-12"> |
116 | 123 | <label class="actions-label">Actions: </label> |
117 | 124 | </div> |
|
154 | 161 | { header: "BirthMonth", itemField: "birthMonth"} |
155 | 162 | ]; |
156 | 163 |
|
157 | | - $scope.dtOptions = { |
158 | | - paginationType: 'full', |
159 | | - displayLength: 10, |
160 | | - dom: "tp" |
161 | | - }; |
162 | | -
|
163 | | - // [WIP] attempt to dyamically change displayLength (#rows) and turn on/off pagination controls |
164 | | - // See: issues turning on/off pagination. see: https://datatables.net/manual/tech-notes/3 |
| 164 | + // dtOptions paginationType, displayLength, and dom:"p" are no longer being |
| 165 | + // used, but are allowed for backward compatibility. |
| 166 | + // Please switch to prefered 'pageConfig' settings for pf pagination controls |
| 167 | + // Other dtOptions can still be used, such as 'order' |
| 168 | + // $scope.dtOptions = { |
| 169 | + // paginationType: 'full', |
| 170 | + // displayLength: 10, |
| 171 | + // dom: "tp" |
| 172 | + // } |
165 | 173 |
|
166 | | - $scope.usePagination = true; |
167 | | - $scope.togglePagination = function () { |
168 | | - $scope.usePagination = !$scope.usePagination; |
169 | | - console.log("---> togglePagination: " + $scope.usePagination); |
170 | | - if($scope.usePagination) { |
171 | | - $scope.dtOptions.displayLength = 3; |
172 | | - $scope.dtOptions.dom = "tp"; |
173 | | - console.log("---> use pagination: " + $scope.dtOptions.displayLength + ":" + $scope.dtOptions.dom); |
174 | | - } else { |
175 | | - $scope.dtOptions.displayLength = undefined; |
176 | | - $scope.dtOptions.dom = "t"; |
177 | | - } |
178 | | - }; |
| 174 | + // New pagination config settings |
| 175 | + $scope.pageConfig = { |
| 176 | + pageNumber: 1, |
| 177 | + pageSize: 10, |
| 178 | + pageSizeIncrements: [5, 10, 15] |
| 179 | + } |
179 | 180 |
|
180 | 181 | $scope.allItems = [ |
181 | 182 | { |
|
305 | 306 | match = item.address.match(filter.value) !== null; |
306 | 307 | } else if (filter.id === 'birthMonth') { |
307 | 308 | match = item.birthMonth === filter.value; |
| 309 | + } else if (filter.id === 'status') { |
| 310 | + match = item.status === filter.value; |
308 | 311 | } |
309 | 312 | return match; |
310 | 313 | }; |
|
364 | 367 |
|
365 | 368 | $scope.filterConfig = { |
366 | 369 | fields: [ |
| 370 | + { |
| 371 | + id: 'status', |
| 372 | + title: 'Status', |
| 373 | + placeholder: 'Filter by Status...', |
| 374 | + filterType: 'select', |
| 375 | + filterValues: ['error', 'warning', 'ok'] |
| 376 | + }, |
367 | 377 | { |
368 | 378 | id: 'name', |
369 | 379 | title: 'Name', |
|
0 commit comments