Skip to content
This repository was archived by the owner on Jan 7, 2022. It is now read-only.

Commit 4e17de4

Browse files
bensgroibensgroi
authored
Merge pull request #51 from jonshaffer/internal-paging
Added internal paging + unit tests. Updated paging demo
2 parents 9ff1bcb + 6204a5b commit 4e17de4

7 files changed

Lines changed: 182 additions & 63 deletions

File tree

‎demos/paging.html‎

Lines changed: 17 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!doctype html>
22
<html lang="en">
3+
34
<head>
45
<meta charset=" utf-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -38,65 +39,50 @@
3839
.dt-row-even{
3940
background:#f6f7f8;
4041
}
41-
4242
</style>
4343
<link href="../dist/dataTable.css" media="all" rel="stylesheet" />
4444
<link href="../dist/themes/material.css" media="all" rel="stylesheet" />
4545
<link href="../dist/themes/icons.css" rel="stylesheet">
4646
</head>
47-
<body ng-app="app" ng-controller="HomeController">
4847

48+
<body ng-app="app" ng-controller="HomeController">
4949

50-
<dtable options="optionz" rows="data" class="material" on-page="paging(offset, size)"></dtable>
50+
<dtable options="options" rows="data" class="material"></dtable>
5151

5252
<script src="../jspm_packages/system.js"></script>
5353
<script src="../config.js"></script>
5454

5555
<script>
5656

57-
System.import('dataTable').then(function(dt){
58-
var module = angular.module('app', [ dt.default.name ]);
57+
System.import('dataTable').then(function (dt) {
58+
var module = angular.module('app', [dt.default.name]);
5959

60-
module.controller('HomeController', function($scope, $http){
61-
$scope.data = []
60+
module.controller('HomeController', function ($scope, $http) {
61+
$scope.data = [];
6262

63-
$scope.optionz = {
63+
$scope.options = {
6464
rowHeight: 50,
6565
headerHeight: 50,
6666
footerHeight: 50,
6767
scrollbarV: false,
68+
sortType: 'single',
6869
columns: [
69-
{ name: "Name", prop: "name" },
70-
{ name: "Gender", prop: "gender" },
71-
{ name: "Company", prop: "company" }
70+
{ name: 'Name', prop: 'name' },
71+
{ name: 'Gender', prop: 'gender' },
72+
{ name: 'Company', prop: 'company' }
7273
],
7374
columnMode: 'force',
7475
paging: {
75-
externalPaging: true,
7676
size: 10
7777
}
7878
};
7979

80-
$scope.paging = function(offset, size){
81-
setTimeout(function(){
82-
$http.get('/demos/data/100.json').success(function(d) {
83-
84-
$scope.optionz.paging.count = d.length;
85-
86-
var set = d.splice(offset, size);
87-
// only insert items i don't already have
88-
set.forEach(function(r, i){
89-
var idx = i + (offset * size);
90-
$scope.data[idx] = r;
91-
});
92-
93-
console.log('paging!', offset, size)
94-
});
95-
}, 200)
96-
};
80+
$http.get('/demos/data/100.json').success(function (d) {
81+
$scope.data = d;
82+
});
9783
});
9884
});
9985
</script>
100-
10186
</body>
102-
</html>
87+
88+
</html>

‎demos/virtual-paging.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@
7070
headerHeight: 50,
7171
footerHeight: 50,
7272
columns: [
73-
{ name: "Name", prop: "name" },
74-
{ name: "Gender", prop: "gender" },
75-
{ name: "Company", prop: "company" }
73+
{ name: "Name", prop: "name", sortable: false },
74+
{ name: "Gender", prop: "gender", sortable: false },
75+
{ name: "Company", prop: "company", sortable: false }
7676
],
7777
columnMode: 'force',
7878
paging: {

‎src/components/DataTableController.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,9 @@ export default class DataTableController {
150150
* Sorts the values of the grid for client side sorting.
151151
*/
152152
onSorted() {
153-
if (!this.rows) return;
153+
if (!this.rows) {
154+
return;
155+
}
154156

155157
// return all sorted column, in the same order in which they were sorted
156158
const sorts = this.options.columns
@@ -175,12 +177,15 @@ export default class DataTableController {
175177
});
176178

177179
if (sorts.length) {
178-
this.onSort({ sorts });
180+
if (this.onSort) {
181+
this.onSort({ sorts });
182+
}
179183

180184
if (this.options.onSort) {
181185
this.options.onSort(sorts);
182186
}
183187

188+
184189
const clientSorts = [];
185190

186191
for (let i = 0, len = sorts.length; i < len; i += 1) {
@@ -204,7 +209,9 @@ export default class DataTableController {
204209
}
205210
}
206211

207-
this.options.internal.setYOffset(0);
212+
if (this.options.internal && this.options.internal.setYOffset) {
213+
this.options.internal.setYOffset(0);
214+
}
208215
}
209216

210217
/**

‎src/components/DataTableController.spec.js‎

Lines changed: 62 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,69 @@
11
import DataTableController from './DataTableController';
2+
import TableDefaults from '../defaults';
23

34
describe('DataTableController', () => {
4-
// let $controller = null;
5-
//
6-
// beforeEach(
7-
// inject((_$controller_) => {
8-
// $controller = _$controller_;
9-
// }),
10-
// );
11-
12-
it('should export a function', () => {
13-
expect(DataTableController).toEqual(jasmine.any(Function));
14-
});
5+
let ctrl = null;
6+
let scope = null;
7+
let setController = null;
8+
9+
beforeEach(inject(($rootScope, $filter) => {
10+
scope = $rootScope.$new();
11+
12+
setController = (bindings) => {
13+
bindings.options = Object.assign({}, TableDefaults, bindings.options);
14+
bindings.data = bindings.rows;
15+
16+
ctrl = new DataTableController(scope, $filter);
17+
18+
Object.assign(ctrl, bindings);
19+
};
20+
}));
21+
22+
describe('sorting', () => {
23+
24+
beforeEach(() => {
25+
let options = {
26+
columns: [
27+
{ prop: 'name', sort: 'asc' },
28+
{ prop: 'age'}
29+
]
30+
};
31+
let rows = [
32+
{ name: 'Walter', age: 49 },
33+
{ name: 'Dude', age: 45 },
34+
{ name: 'Donnie', age: 46 },
35+
{ name: 'Maude', age: 48 }
36+
];
37+
38+
setController({
39+
options: options,
40+
rows: rows
41+
});
42+
43+
ctrl.$onInit();
44+
});
45+
46+
it('should be sorted', () => {
47+
ctrl.onSorted();
48+
49+
let sortOrder = ctrl.rows[0].name < ctrl.rows[1].name;
50+
51+
expect(sortOrder).toBe(true);
52+
});
53+
54+
it('should re-sort', () => {
55+
ctrl.onSorted();
56+
57+
let sortedAscending = ctrl.rows[0].name < ctrl.rows[1].name;
58+
59+
expect(sortedAscending).toBe(true);
60+
61+
ctrl.options.columns[0].sort = 'desc';
62+
ctrl.onSorted();
1563

16-
describe('', () => {
64+
sortedAscending = ctrl.rows[0].name < ctrl.rows[1].name;
1765

66+
expect(sortedAscending).toBe(false);
67+
});
1868
});
1969
});

‎src/components/body/BodyController.js‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,19 @@ export default class BodyController {
7171
}
7272
}
7373

74+
/**
75+
* @description Constructs the rows for the page, assuming we're using internal paging.
76+
*/
77+
buildInternalPage() {
78+
let i;
79+
80+
this.tempRows.splice(0, this.tempRows.length);
81+
82+
for (i = 0; i < this.options.paging.size; i += 1) {
83+
this.tempRows[i] = this.rows[(this.options.paging.offset * this.options.paging.size) + i];
84+
}
85+
}
86+
7487
setConditionalWatches() {
7588
for (let i = this.watchListeners.length - 1; i >= 0; i -= 1) {
7689
this.watchListeners[i]();
@@ -82,7 +95,7 @@ export default class BodyController {
8295
(this.options.scrollbarV ||
8396
(!this.options.scrollbarV &&
8497
this.options.paging &&
85-
this.options.paging.externalPaging))) {
98+
this.options.paging.size))) {
8699
let sized = false;
87100

88101
this.watchListeners.push(this.$scope.$watch('body.options.paging.size', (newVal, oldVal) => {
@@ -99,10 +112,16 @@ export default class BodyController {
99112

100113
this.watchListeners.push(this.$scope.$watch('body.options.paging.offset', (newVal) => {
101114
if (this.options.paging.size) {
102-
this.onPage({
103-
offset: newVal,
104-
size: this.options.paging.size,
105-
});
115+
if (!this.options.paging.externalPaging) {
116+
this.buildInternalPage();
117+
}
118+
119+
if (this.onPage) {
120+
this.onPage({
121+
offset: newVal,
122+
size: this.options.paging.size,
123+
});
124+
}
106125
}
107126
}));
108127
}
@@ -137,14 +156,19 @@ export default class BodyController {
137156
}
138157

139158
if (this.options.paging.externalPaging) {
159+
// We're using external paging
140160
const idxs = this.getFirstLastIndexes();
141161
let idx = idxs.first;
142162

143163
this.tempRows.splice(0, this.tempRows.length);
144164
while (idx < idxs.last) {
145165
this.tempRows.push(rows[idx += 1]);
146166
}
167+
} else if (this.options.paging.size) {
168+
// We're using internal paging
169+
this.buildInternalPage();
147170
} else {
171+
// No paging
148172
this.tempRows.splice(0, this.tempRows.length);
149173
this.tempRows.push(...rows);
150174
}
@@ -439,7 +463,9 @@ export default class BodyController {
439463
rowIndex += 1;
440464
}
441465

442-
this.options.internal.styleTranslator.update(this.tempRows);
466+
if (this.options.internal && this.options.internal.styleTranslator) {
467+
this.options.internal.styleTranslator.update(this.tempRows);
468+
}
443469

444470
return this.tempRows;
445471
}

‎src/components/body/BodyController.spec.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,56 @@ describe('BodyController', () => {
5959

6060
expect(ctrl.data).not.toEqual(0);
6161
});
62+
63+
it('should have the correct number of rows', () => {
64+
let options = {
65+
columns: [
66+
{ name: 'Name', prop: 'name' },
67+
{ name: 'Company', prop: 'company' }
68+
],
69+
paging: {
70+
offset: 0,
71+
size: 3
72+
}
73+
};
74+
75+
setController({
76+
options: options,
77+
rows: olympicRows
78+
});
79+
80+
ctrl.$onInit();
81+
scope.$digest();
82+
83+
expect(ctrl.tempRows.length).toBe(3);
84+
});
85+
86+
it('should increment page', () => {
87+
let options = {
88+
columns: [
89+
{ name: 'Name', prop: 'name' },
90+
{ name: 'Company', prop: 'company' }
91+
],
92+
paging: {
93+
offset: 0,
94+
size: 3
95+
}
96+
};
97+
98+
setController({
99+
options: options,
100+
rows: olympicRows
101+
});
102+
103+
ctrl.$onInit();
104+
scope.$digest();
105+
106+
let name = ctrl.tempRows[0].name;
107+
ctrl.options.paging.offset = 1;
108+
scope.$digest();
109+
110+
expect(ctrl.tempRows[0].name).not.toBe(name);
111+
});
62112
});
63113

64114
describe('when setting tree and group columns', () => {

0 commit comments

Comments
 (0)