ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on December 14, 2016, 06:53:35 pm
-
Hi
I have a dataset with around 60 000 rows and 20 columns. The data is loaded through <script src="data.js"></script> where is its stored as JSON data (Array of row objects).
I use virtualY: true
It takes around 20 seconds to load the table in Chrome...What would be the easiest way to increase loading speed / filtering?
Thanks.
-
If it takes 20 sec to load data in browser, then it's probably a network bottleneck.
Otherwise it shouldn't take more than a second to load data in grid in virtual mode irrespective of number of rows.
Could you please share some sample for me to check upon.
-
I removed all render functions and the filling of the filter menus and now render 200 000 rows in like 5 seconds...I use:
filterModel: { header: true },
numberCell: { show: false },
height: window.innerHeight,
hoverMode: "row",
scrollModel: {horizontal: true, vertical: true },
title: "TEST",
pageModel: { type: "local", rPP: 100 },
editable: false,
collapsible: { on: false, toggle: false},
virtualY: true,
colModel: colModel,
dataModel: {data: data},
still...virtualY:true doesn't seem to increase loading speed...it seems to be the same with or without?
What could cause it to not have any effect?
-
Since you have been using paging with rPP:100, 5 secs are spent somewhere else other than rendering.
Please share a complete sample reproducing the issue so that I can look into it.
-
<!-- jQuery dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- ParamQuery Grid css files -->
<link rel="stylesheet" href="paramquery-3.3.1/pqgrid.min.css" />
<!-- Add pqgrid.ui.css for jQueryUI theme support -->
<link rel="stylesheet" href="paramquery-3.3.1/pqgrid.ui.min.css" />
<!-- ParamQuery Grid custom theme e.g., office, bootstrap, rosy, chocolate, etc (optional) -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/sunny/jquery-ui.css" />
<!-- ParamQuery Grid js files -->
<script src="paramquery-3.3.1/pqgrid.min.js"></script>
<!-- DataSource -->
<script src="data.js"></script>
<script>
$(function() {
var colModel = [
{ title:"COLUMN_1", width:80, dataIndx: "COLUMN_1", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_2", width:80, dataIndx: "COLUMN_2", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_3", width:80, dataIndx: "COLUMN_3", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_4", width:80, dataIndx: "COLUMN_4", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_5", width:80, dataIndx: "COLUMN_5", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_6", width:80, dataIndx: "COLUMN_6", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_7", width:80, dataIndx: "COLUMN_7", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_8", width:80, dataIndx: "COLUMN_8", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_9", width:80, dataIndx: "COLUMN_9", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_10", width:80, dataIndx: "COLUMN_10", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_11", width:80, dataIndx: "COLUMN_11", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_12", width:80, dataIndx: "COLUMN_12", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_13", width:80, dataIndx: "COLUMN_13", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_14", width:80, dataIndx: "COLUMN_14", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_15", width:80, dataIndx: "COLUMN_15", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_16", width:80, dataIndx: "COLUMN_16", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_17", width:80, dataIndx: "COLUMN_17", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_18", width:80, dataIndx: "COLUMN_18", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_19", width:80, dataIndx: "COLUMN_19", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }},
{ title:"COLUMN_20", width:80, dataIndx: "COLUMN_20", filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }}
]
var obj = {
filterModel: { header: true },
numberCell: { show: true },
height: window.innerHeight,
hoverMode: "row",
title: "TEST",
pageModel: { type: "local", rPP: 100 },
editable: false,
collapsible: { on: false, toggle: false },
virtualY: true,
colModel: colModel,
dataModel: { data: data }
}
var grid = pq.grid( "#grid_array", obj );
});
</script>
<body>
<div id="grid_array"></div>
</body>
data.js contains 200 000 rows like this:
var data = [
{ COLUMN_1: '1255295', COLUMN_2: '1091737', COLUMN_3: '1876437', COLUMN_4: '1811482', COLUMN_5: '1050546', COLUMN_6: '1735940', COLUMN_7: '1304513', COLUMN_8: '1244989', COLUMN_9: '1545409', COLUMN_10: '1464608', COLUMN_11: '1006538', COLUMN_12: '1693937', COLUMN_13: '1580089', COLUMN_14: '1846202', COLUMN_15: '1820061', COLUMN_16: '1561018', COLUMN_17: '1477287', COLUMN_18: '1669908', COLUMN_19: '1311600', COLUMN_20: '1476354' },
{ COLUMN_1: '1846202', COLUMN_2: '1050546', COLUMN_3: '1091737', COLUMN_4: '1811482', COLUMN_5: '1561018', COLUMN_6: '1820061', COLUMN_7: '1244989', COLUMN_8: '1477287', COLUMN_9: '1311600', COLUMN_10: '1464608', COLUMN_11: '1580089', COLUMN_12: '1669908', COLUMN_13: '1304513', COLUMN_14: '1255295', COLUMN_15: '1476354', COLUMN_16: '1735940', COLUMN_17: '1876437', COLUMN_18: '1693937', COLUMN_19: '1545409', COLUMN_20: '1006538' },
{ COLUMN_1: '1255295', COLUMN_2: '1561018', COLUMN_3: '1050546', COLUMN_4: '1811482', COLUMN_5: '1735940', COLUMN_6: '1476354', COLUMN_7: '1477287', COLUMN_8: '1876437', COLUMN_9: '1545409', COLUMN_10: '1464608', COLUMN_11: '1304513', COLUMN_12: '1693937', COLUMN_13: '1244989', COLUMN_14: '1846202', COLUMN_15: '1006538', COLUMN_16: '1820061', COLUMN_17: '1091737', COLUMN_18: '1669908', COLUMN_19: '1311600', COLUMN_20: '1580089' },
...
Thanks.
-
What's the size of data.js file. Does 5 sec include the time taken by data.js file to load in the browser?
EDIT
=============
For me the data binding takes only ~ 100ms.
http://jsfiddle.net/pjkosx8d/
-
data.js is 170 MB, binding is around 150ms when using your timing example...
-
That's a case of performance issue due to network latency.
Loading such a big file is not a good idea.
Please try to implement remote paging to avoid loading all data at once: http://paramquery.com/pro/demos/paging
-
Is that possible with dataModel local? Or do it need to be remote?
Also why doesn't virtualY: true have any effect on the current setup?
Thanks.
-
dataModel.location needs to be remote for remote paging.
virtualX: true & virtualY: true are for virtual rendering means rendering only the rows and columns visible in the viewport. It speeds up the rendering and takes less browser resources. It can't help speed up the download of remote data.
-
No post needed, can be removed.