jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Render only 1000 rows first, defer remaining rows

Browse Source
This commit is contained in:
Faris Ansari 2017-09-30 15:51:10 +05:30
parent f4acd08b43
commit e44fd855ef
4 changed files with 131 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -495,8 +495,11 @@
]
};
data.rows = data.rows.concat(data.rows);
data.rows = data.rows.concat(data.rows);
for (let i = 0; i < 12; i++) {
data.rows = data.rows.concat(data.rows);
}
console.log('No of Rows:', data.rows.length)
performance.mark("ReGrid-start");
var grid = new ReGrid({

90
lib/ReGrid.js
View File

@ -193,15 +193,59 @@ var ReGrid = function () {
// empty body
this.bodyScrollable.html('\n <table class="data-table-body table table-bordered">\n ' + (0, _utils.getBodyHTML)([]) + '\n </table>\n ');
var data = this.data.rows.map(function (row) {
return (0, _utils.getRowHTML)(row, { rowIndex: row[0].rowIndex });
});
this.start = 0;
this.pageLength = 1000;
this.end = this.start + this.pageLength;
var initialData = this.getDataForClusterize(
// only append ${this.pageLength} rows in the beginning
// defer remaining rows
this.data.rows.slice(this.start, this.end));
this.clusterize = new _clusterize2.default({
rows: data,
rows: initialData,
scrollElem: this.bodyScrollable.get(0),
contentElem: this.bodyScrollable.find('tbody').get(0)
});
this.appendRemainingData();
}
}, {
key: 'appendRemainingData',
value: function appendRemainingData() {
var _this = this;
var dataAppended = this.pageLength;
var promises = [];
while (dataAppended + this.pageLength < this.data.rows.length) {
this.start = this.end;
this.end = this.start + this.pageLength;
var promise = new Promise(function (resolve) {
setTimeout(function () {
var rows = _this.data.rows.slice(_this.start, _this.end);
var data = _this.getDataForClusterize(rows);
_this.clusterize.append(data);
resolve();
}, 0);
});
dataAppended += this.pageLength;
promises.push(promise);
}
return promises.reduce(function (prev, cur) {
return prev.then(cur);
}, Promise.resolve());
}
}, {
key: 'getDataForClusterize',
value: function getDataForClusterize(rows) {
return rows.map(function (row) {
return (0, _utils.getRowHTML)(row, { rowIndex: row[0].rowIndex });
});
}
}, {
key: 'updateCell',
@ -491,7 +535,7 @@ var ReGrid = function () {
}, {
key: 'setColumnWidths',
value: function setColumnWidths() {
var _this = this;
var _this2 = this;
var availableWidth = this.wrapper.width();
var headerWidth = this.header.width();
@ -504,15 +548,15 @@ var ReGrid = function () {
var deltaWidth = (availableWidth - headerWidth) / this.data.columns.length;
this.data.columns.map(function (col) {
var width = _this.getColumnHeaderElement(col.colIndex).width();
var width = _this2.getColumnHeaderElement(col.colIndex).width();
var finalWidth = width + deltaWidth - 16;
if (_this.addSerialNoColumn && col.colIndex === 0) {
if (_this2.addSerialNoColumn && col.colIndex === 0) {
return;
}
_this.setColumnHeaderWidth(col.colIndex, finalWidth);
_this.setColumnWidth(col.colIndex, finalWidth);
_this2.setColumnHeaderWidth(col.colIndex, finalWidth);
_this2.setColumnWidth(col.colIndex, finalWidth);
});
this.setBodyWidth();
}
@ -524,27 +568,20 @@ var ReGrid = function () {
}, {
key: 'appendStyle',
value: function appendStyle(style) {
var $style = this.wrapper.find('style[data-id="regrid"]');
this.getStyleEl();
if ($style.length === 0) {
$style = (0, _jQuery2.default)('<style data-id="regrid"></style>').prependTo(this.wrapper);
}
// existing styles
var styles = $style.text();
var styles = this.$style.text();
styles += style;
$style.html(styles);
this.$style.html(styles);
}
}, {
key: 'setStyle',
value: function setStyle(rule, style) {
var $style = this.wrapper.find('style[data-id="regrid"]');
this.getStyleEl();
if ($style.length === 0) {
$style = (0, _jQuery2.default)('<style data-id="regrid"></style>').prependTo(this.wrapper);
}
var styles = $style.text();
var styles = this.$style.text();
var patternStr = (0, _utils.escapeRegExp)(rule) + ' {([^}]*)}';
var pattern = new RegExp(patternStr, 'g');
@ -556,7 +593,16 @@ var ReGrid = function () {
return replacer.replace(propPattern, '');
});
$style.html(styles);
this.$style.html(styles);
}
}, {
key: 'getStyleEl',
value: function getStyleEl() {
if (!this.$style) {
this.$style = (0, _jQuery2.default)('<style data-id="regrid"></style>').prependTo(this.wrapper);
}
return this.$style;
}
}, {
key: 'getColumn',

2
lib/ReGrid.js.map
View File

File diff suppressed because one or more lines are too long

73
src/regrid.js
View File

@ -90,15 +90,54 @@ export default class ReGrid {
</table>
`);
const data = this.data.rows.map(
(row) => getRowHTML(row, { rowIndex: row[0].rowIndex })
this.start = 0;
this.pageLength = 1000;
this.end = this.start + this.pageLength;
const initialData = this.getDataForClusterize(
// only append ${this.pageLength} rows in the beginning
// defer remaining rows
this.data.rows.slice(this.start, this.end)
);
this.clusterize = new Clusterize({
rows: data,
rows: initialData,
scrollElem: this.bodyScrollable.get(0),
contentElem: this.bodyScrollable.find('tbody').get(0)
});
this.appendRemainingData();
}
appendRemainingData() {
let dataAppended = this.pageLength;
const promises = [];
while (dataAppended + this.pageLength < this.data.rows.length) {
this.start = this.end;
this.end = this.start + this.pageLength;
const promise = new Promise(resolve => {
setTimeout(() => {
const rows = this.data.rows.slice(this.start, this.end);
const data = this.getDataForClusterize(rows);
this.clusterize.append(data);
resolve();
}, 0);
});
dataAppended += this.pageLength;
promises.push(promise);
}
return promises.reduce(
(prev, cur) => prev.then(cur), Promise.resolve()
);
}
getDataForClusterize(rows) {
return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex }));
}
updateCell(rowIndex, colIndex, value) {
@ -405,26 +444,19 @@ export default class ReGrid {
}
appendStyle(style) {
let $style = this.wrapper.find('style[data-id="regrid"]');
this.getStyleEl();
if ($style.length === 0) {
$style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
}
// existing styles
let styles = $style.text();
let styles = this.$style.text();
styles += style;
$style.html(styles);
this.$style.html(styles);
}
setStyle(rule, style) {
let $style = this.wrapper.find('style[data-id="regrid"]');
this.getStyleEl();
if ($style.length === 0) {
$style = $('<style data-id="regrid"></style>').prependTo(this.wrapper);
}
let styles = $style.text();
let styles = this.$style.text();
const patternStr = `${escapeRegExp(rule)} {([^}]*)}`;
const pattern = new RegExp(patternStr, 'g');
@ -437,7 +469,16 @@ export default class ReGrid {
return replacer.replace(propPattern, '');
});
$style.html(styles);
this.$style.html(styles);
}
getStyleEl() {
if (!this.$style) {
this.$style = $('<style data-id="regrid"></style>')
.prependTo(this.wrapper);
}
return this.$style;
}
getColumn(colIndex) {