Datagrid: Performance issues

[getk]

Hi
I've enabled Datagrid and was working perfectly for last 2 months.
Recently, we had issues when the number of alerts increased to >1000 at a single time.

The datagrid is enabled to
1.  Collect all data at a single time.. i.e. 1000 alerts + its data will be coming in one json call/web-service.
2. Client level pagination is enabled in datagrid
3. Datagrid refreshed every 60 seconds

But when user login , Firefox shows unresponsive script message. I tried running the web-service at that time and it returned pretty much quickly though a huge message. So its seems to be related to Datagrid somehow.

Is there a way, I can improve the datagrid to allow page by page data call from a single json data? (ie split up at client?)

[stworthy]

Please refer to this client side pagination example http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination.

[getk]

Hi Stworthy,
Thanks for that. I'm not quite understanding the code.

Is that example loading "10" events a time (per page) and loads next 10 only when clicks next page or loading all the 800 at the same time?

[stworthy]

It loads 800 records at a time but displays 10 records page by page.

[chrwei]

the client side paging and large data examples seem to handle 1000 rows just fine.  are you sure it's not the server side code the data comes from?  or is each row really large making the actual data 10 times what the examples do?

[getk]

the client side paging and large data examples seem to handle 1000 rows just fine.  are you sure it's not the server side code the data comes from?  or is each row really large making the actual data 10 times what the examples do?

The server side, i did manual and automated checks by calling the script/curl around 10 times in a minute (though it calls only once in 2 mins in real scenario) and loads up quite fast. The web-service data comes with 800 datasets every time quickly.

[getk]

Please refer to this client side pagination example http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination.

Hi Stworthy,
I hope this is from easyui 1.3.4 version only?
Will this work with jquery 1.8.x ? (or is it only with Jquery 2.x? )

[getk]

Hi Guys,
I'm not that good in Javascript. Can you please help me in putting the required changes for client pagination into the below code?
My code is as below.

Code:

	<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		var JSONurl = '/tmp/vta.json';   // Input data 
		var myTitle = 'Monitor Screen';
		
			$('#dg').datagrid({  
				url:JSONurl,
				pageSize: 30,
				pagination: true,
				rownumbers: true,		 
				singleSelect: true,    // So Users can select one alert at a time
				remoteSort: false,
				title: myTitle,
				rowStyler:function(index,row){     // ROW Colouring  
					if (row.severity == '0'){      // GOOD level
						return 'background-color:#58FA82;';  
					}
					else if (row.severity == '4'){      // WARNING level
						return 'background-color:#FBB870;';  
					}
					else if (row.severity == '5'){      // CRITICAL level
						return 'background-color:#FF7684;';  
					}
					},  
				columns:[[  
						{field:'ID',title:'ID',width:45, sortable:true},  
						{field:'start_time',title:'Start_time',width:100, sortable:true},
						{field:'team',title:'team',width:180, sortable:true},  
						{field:'last_update',title:'Last_update',width:100, sortable:true},  
						{field:'details',title:'Details',width:260, sortable:true},  
						{field:'severity',title:'severity',width:40, sortable:true}  
				]]  
			});


			// Function to reload grid every x seconds
			// This will ensure no rotating icons are shown. Gives a seamless effect
				$(function() {
					$('#dg').datagrid({loadMsg:''});  
					  function grid_refresh() {
						$('#dg').datagrid('reload'); 

						setTimeout(grid_refresh, 120000); 
					  }

					  grid_refresh();
					});


	</script>

The html call is done as

Code:

<table id="dg" toolbar="#toolbar" style="height:720px;" fit="true" sortName="start_time" sortOrder="desc"></table>

Any help would be appreciated.
Cheers