Skip to content

Commit 79386c6

Browse files
AlexanderZhukCoherentAlexanderZhukCoherent
committed
Merge pull request #3 from angular-data-grid/pagination
rename directive and modules, add css vars
2 parents 17064f5 + 9ebab3f commit 79386c6

File tree

12 files changed

+81
-105
lines changed

12 files changed

+81
-105
lines changed

‎README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
#Angular Data Grid
22

3+
34
Light and flexible Data Grid for AngularJS applications.
45

5-
You can use Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters grid-options and grid-actions.
6+
```
7+
var s = "JavaScript syntax highlighting";
8+
alert(s);
9+
```
10+
11+
You can use ```data-trigger``` Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters grid-options and grid-actions.
612

713
grid-options : Name of object in your controller with start options for grid. You must create this object with at least 1 required parameter - data
814

‎demo/demo.css‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
table {
2+
border-collapse: collapse;
3+
border-spacing: 0; }
4+
15
:focus {
26
outline: none; }
37

@@ -25,19 +29,6 @@
2529
.pagination a .md-ripple-container {
2630
border-radius: 2px; }
2731

28-
.pagination-prev a,
29-
.pagination-next a,
30-
.pagination-first a,
31-
.pagination-last a {
32-
padding: 3px 5px; }
33-
34-
.pagination-prev svg,
35-
.pagination-next svg,
36-
.pagination-first svg,
37-
.pagination-last svg {
38-
width: 24px;
39-
height: 24px; }
40-
4132
.pagination-none-svg svg {
4233
display: none !important; }
4334

@@ -63,12 +54,12 @@
6354
.pagination .active a {
6455
color: #fff; }
6556

66-
.grid-data-table td {
57+
.table td {
6758
border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
6859
padding: 12px; }
6960

70-
.grid-data-table th {
71-
padding: 0 12px;
61+
.table th {
62+
padding: 12px;
7263
border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
7364

7465
th.sortable {

‎demo/demoApp.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('myApp', ['dataGrid', 'ui.bootstrap.pagination'])
1+
angular.module('myApp', ['dataGrid', 'pagination'])
22
.controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
33

44
$scope.getData = function () {

‎dist/dataGrid.css‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
table {
2+
border-collapse: collapse;
3+
border-spacing: 0; }
4+
15
:focus {
26
outline: none; }
37

@@ -25,19 +29,6 @@
2529
.pagination a .md-ripple-container {
2630
border-radius: 2px; }
2731

28-
.pagination-prev a,
29-
.pagination-next a,
30-
.pagination-first a,
31-
.pagination-last a {
32-
padding: 3px 5px; }
33-
34-
.pagination-prev svg,
35-
.pagination-next svg,
36-
.pagination-first svg,
37-
.pagination-last svg {
38-
width: 24px;
39-
height: 24px; }
40-
4132
.pagination-none-svg svg {
4233
display: none !important; }
4334

@@ -63,12 +54,12 @@
6354
.pagination .active a {
6455
color: #fff; }
6556

66-
.grid-data-table td {
57+
.table td {
6758
border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
6859
padding: 12px; }
6960

70-
.grid-data-table th {
71-
padding: 0 12px;
61+
.table th {
62+
padding: 12px;
7263
border-bottom: 1px rgba(0, 0, 0, 0.12) solid; }
7364

7465
th.sortable {

‎dist/dataGrid.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
angular.module('dataGrid', [])
1+
angular
2+
.module('dataGrid', [])
23
.filter('startFrom', function () {
34
return function (input, start) {
45
if (input) {
@@ -403,7 +404,6 @@ angular.module('dataGrid', [])
403404
}
404405
});
405406

406-
407407
function deepFind(obj, path) {
408408
var paths = path.split('.'),
409409
current = obj,

‎dist/pagination.js‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
angular.module('ui.bootstrap.paging', [])
2-
/**
3-
* Helper internal service for generating common controller code between the
4-
* pager and pagination components
5-
*/
6-
.factory('uibPaging', ['$parse', function ($parse) {
1+
angular
2+
.module('paging', [])
3+
.factory('paging', ['$parse', function ($parse) {
74
return {
85
create: function (ctrl, $scope, $attrs) {
96
ctrl.setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
@@ -84,18 +81,19 @@ angular.module('ui.bootstrap.paging', [])
8481
};
8582
}]);
8683

87-
angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
88-
.controller('UibPaginationController', ['$scope', '$attrs', '$parse', 'uibPaging', 'uibPaginationConfig', function ($scope, $attrs, $parse, uibPaging, uibPaginationConfig) {
84+
angular
85+
.module('pagination', ['paging'])
86+
.controller('PaginationController', ['$scope', '$attrs', '$parse', 'paging', 'paginationConfig', function ($scope, $attrs, $parse, paging, paginationConfig) {
8987
var ctrl = this;
9088
// Setup configuration parameters
91-
var maxSize = angular.isDefined($attrs.maxSize) ? $scope.$parent.$eval($attrs.maxSize) : uibPaginationConfig.maxSize,
92-
rotate = angular.isDefined($attrs.rotate) ? $scope.$parent.$eval($attrs.rotate) : uibPaginationConfig.rotate,
93-
forceEllipses = angular.isDefined($attrs.forceEllipses) ? $scope.$parent.$eval($attrs.forceEllipses) : uibPaginationConfig.forceEllipses,
94-
boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : uibPaginationConfig.boundaryLinkNumbers;
95-
$scope.boundaryLinks = angular.isDefined($attrs.boundaryLinks) ? $scope.$parent.$eval($attrs.boundaryLinks) : uibPaginationConfig.boundaryLinks;
96-
$scope.directionLinks = angular.isDefined($attrs.directionLinks) ? $scope.$parent.$eval($attrs.directionLinks) : uibPaginationConfig.directionLinks;
89+
var maxSize = angular.isDefined($attrs.maxSize) ? $scope.$parent.$eval($attrs.maxSize) : paginationConfig.maxSize,
90+
rotate = angular.isDefined($attrs.rotate) ? $scope.$parent.$eval($attrs.rotate) : paginationConfig.rotate,
91+
forceEllipses = angular.isDefined($attrs.forceEllipses) ? $scope.$parent.$eval($attrs.forceEllipses) : paginationConfig.forceEllipses,
92+
boundaryLinkNumbers = angular.isDefined($attrs.boundaryLinkNumbers) ? $scope.$parent.$eval($attrs.boundaryLinkNumbers) : paginationConfig.boundaryLinkNumbers;
93+
$scope.boundaryLinks = angular.isDefined($attrs.boundaryLinks) ? $scope.$parent.$eval($attrs.boundaryLinks) : paginationConfig.boundaryLinks;
94+
$scope.directionLinks = angular.isDefined($attrs.directionLinks) ? $scope.$parent.$eval($attrs.directionLinks) : paginationConfig.directionLinks;
9795

98-
uibPaging.create(this, $scope, $attrs);
96+
paging.create(this, $scope, $attrs);
9997

10098
if ($attrs.maxSize) {
10199
$scope.$parent.$watch($parse($attrs.maxSize), function (value) {
@@ -193,7 +191,7 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
193191
};
194192
}])
195193

196-
.constant('uibPaginationConfig', {
194+
.constant('paginationConfig', {
197195
itemsPerPage: 10,
198196
boundaryLinks: false,
199197
boundaryLinkNumbers: false,
@@ -206,7 +204,7 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
206204
forceEllipses: false
207205
})
208206

209-
.directive('uibPagination', ['$parse', 'uibPaginationConfig', function ($parse, uibPaginationConfig) {
207+
.directive('pagination', ['$parse', 'paginationConfig', function ($parse, paginationConfig) {
210208
return {
211209
scope: {
212210
totalItems: '=',
@@ -216,8 +214,8 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
216214
lastText: '@',
217215
ngDisabled: '='
218216
},
219-
require: ['uibPagination', '?ngModel'],
220-
controller: 'UibPaginationController',
217+
require: ['pagination', '?ngModel'],
218+
controller: 'PaginationController',
221219
controllerAs: 'pagination',
222220
templateUrl: function (element, attrs) {
223221
return attrs.templateUrl || 'src/template/pagination/pagination.html';
@@ -230,15 +228,13 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
230228
return; // do nothing if no ng-model
231229
}
232230

233-
paginationCtrl.init(ngModelCtrl, uibPaginationConfig);
231+
paginationCtrl.init(ngModelCtrl, paginationConfig);
234232
}
235233
};
236234
}])
237235

238236
.run(['$templateCache', function ($templateCache) {
239-
240237
$templateCache.put('src/template/pagination/pagination.html',
241238
"<ul class='pagination'><li ng-if='::boundaryLinks' ng-class='{disabled: noPrevious()||ngDisabled}' class='pagination-first'><a href ng-click='selectPage(1, $event)'>{{::getText('first')}}</a></li> <li ng-if='::directionLinks' ng-class='{disabled: noPrevious()||ngDisabled}' class='pagination-prev'><a href ng-click='selectPage(page - 1, $event)'>{{::getText('previous')}}</a></li> <li ng-repeat='page in pages track by $index' ng-class='{active: page.active,disabled: ngDisabled&&!page.active}' class='pagination-page'><a href ng-click='selectPage(page.number, $event)'>{{page.text}}</a></li> <li ng-if='::directionLinks' ng-class='{disabled: noNext()||ngDisabled}' class='pagination-next'><a href ng-click='selectPage(page + 1, $event)'>{{::getText('next')}}</a></li> <li ng-if='::boundaryLinks' ng-class='{disabled: noNext()||ngDisabled}' class='pagination-last'><a href ng-click='selectPage(totalPages, $event)'>{{::getText('last')}}</a></li> </ul>"
242239
);
243-
244240
}]);

‎dist/pagination.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/dataGrid.scss‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@import 'variables';
2+
table {
3+
border-collapse: collapse;
4+
border-spacing: 0;
5+
}
16
:focus {
27
outline: none;
38
}
@@ -15,7 +20,7 @@
1520
box-sizing: border-box;
1621
}
1722
.pagination a {
18-
color: #444;
23+
color: $textColor;
1924
font-size: 16px;
2025
padding: 0 10px;
2126
line-height: 30px;
@@ -26,18 +31,6 @@
2631
border-radius: 2px;
2732
}
2833
}
29-
.pagination-prev,
30-
.pagination-next,
31-
.pagination-first,
32-
.pagination-last {
33-
a {
34-
padding: 3px 5px;
35-
}
36-
svg {
37-
width: 24px;
38-
height: 24px;
39-
}
40-
}
4134
.pagination-none-svg {
4235
svg {
4336
display: none !important;
@@ -56,28 +49,28 @@
5649
.pagination-page {
5750
transition: background .1s ease-out, color .1s ease-out;
5851
&.active {
59-
background: rgb(16,108,200);
52+
background: $activeBg;
6053
a {
61-
color: #fff;
54+
color: $activeText;
6255
}
6356
}
6457
}
6558
.pagination {
6659
transition: background .1s ease-out, color .1s ease-out;
6760
.active {
68-
background: rgb(16,108,200);
61+
background: $activeBg;
6962
a {
70-
color: #fff;
63+
color: $activeText;
7164
}
7265
}
7366
}
74-
.grid-data-table {
67+
.table {
7568
td {
7669
border-bottom: 1px rgba(0,0,0,.12) solid;
7770
padding: 12px;
7871
}
7972
th {
80-
padding: 0 12px;
73+
padding: 12px;
8174
border-bottom: 1px rgba(0,0,0,.12) solid;
8275
}
8376
}
@@ -111,9 +104,9 @@ th.sortable {
111104

112105
.items-per-page {
113106
.active {
114-
background: rgb(16,108,200);
107+
background: $activeBg;
115108
a {
116-
color: #fff;
109+
color: $activeText;
117110
}
118111
}
119112
a {

‎src/css/variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
$activeBg = rgb(16,108,200);
2+
$activeText = #fff;
3+
$textColor = #444;

‎src/js/dataGrid.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
angular.module('dataGrid', [])
1+
angular
2+
.module('dataGrid', [])
23
.filter('startFrom', function () {
34
return function (input, start) {
45
if (input) {
@@ -403,7 +404,6 @@ angular.module('dataGrid', [])
403404
}
404405
});
405406

406-
407407
function deepFind(obj, path) {
408408
var paths = path.split('.'),
409409
current = obj,

0 commit comments

Comments
 (0)