# Auto Paging
Real time loading by scroll action.
<textarea class="sample_log" readonly="true">ajax logs</textarea>
<div class="sample demo-grid middle"></div>
1
2
2
// create DataSource
const GET_RECORDS_SIZE = 100;
const BUFFER_RECORDS_SIZE = (Math.floor(GET_RECORDS_SIZE / 2) || 1);
const loadedData = {};
let isAllLoaded = false;
const dataSource = new cheetahGrid.data.CachedDataSource({
get(index) {
const loadStartIndex = Math.floor(index / GET_RECORDS_SIZE) * GET_RECORDS_SIZE;
if (!loadedData[loadStartIndex]) {
const promiseObject = getRecordsWithAjax(loadStartIndex, GET_RECORDS_SIZE).// return Promise Object
then((data) => {
if (isAllLoaded) {
return data;
}
// length update?
const length = loadStartIndex + data.length;
if (data.length < GET_RECORDS_SIZE) {
// all loaded!!
dataSource.length = length;
isAllLoaded = true;
} else if (dataSource.length <= length) {
// append length!!
dataSource.length = length + BUFFER_RECORDS_SIZE;
}
return data;
});
loadedData[loadStartIndex] = promiseObject;
}
return loadedData[loadStartIndex].
then((data) => data[index - loadStartIndex]);
},
length: BUFFER_RECORDS_SIZE, //init records count
});
// create cheetahGrid
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample'),
header: [
{field: 'personid', caption: 'ID', width: 100},
{field: 'fname', caption: 'First Name', width: 200},
{field: 'lname', caption: 'Last Name', width: 200},
{field: 'email', caption: 'Email', width: 250},
],
frozenColCount: 1,
});
grid.configure('fadeinWhenCallbackInPromise', true);
// set dataSource
grid.dataSource = dataSource;
function getRecordsWithAjax (startIndex, num) {
return new Promise((resolve) => {
const loadedCount = startIndex + num;
let last = false;
if (loadedCount >= 1080) {
num = 1080 - startIndex;
last = true;
}
setTimeout(() => {
const records = [];
for (let i = 0; i < num; i++) {
records.push(generatePerson(startIndex + i));
}
const log = document.querySelector('.sample_log');
log.value += `\nAcquire ${num} data from index ${startIndex}.`;
log.value = log.value.trim();
log.scrollTop = log.scrollHeight;
if (last && records.length) {
const lastData = records[records.length - 1];
lastData.fname = 'Cheetah';
lastData.lname = 'Grid!!';
lastData.email = 'hello_cheetah_grid@gmail.com';
}
resolve(records);
}, 500);
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78