Print Page - Datagrid: Performance issues

Title: Datagrid: Performance issues
Post by: getk on September 03, 2013, 02:00:28 PM

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?)

Title: Re: Datagrid: Performance issues
Post by: stworthy on September 03, 2013, 05:23:05 PM

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.

Title: Re: Datagrid: Performance issues
Post by: getk on September 03, 2013, 11:42:01 PM

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?

Title: Re: Datagrid: Performance issues
Post by: stworthy on September 04, 2013, 12:25:14 AM

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

Title: Re: Datagrid: Performance issues
Post by: chrwei on September 05, 2013, 12:14:48 PM

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?

Title: Re: Datagrid: Performance issues
Post by: getk on September 05, 2013, 12:47:58 PM

Quote from: chrwei on September 05, 2013, 12:14:48 PM

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.

Title: Re: Datagrid: Performance issues
Post by: getk on September 05, 2013, 01:32:19 PM

Quote from: stworthy on September 03, 2013, 05:23:05 PM

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? )

Title: Re: Datagrid: Performance issues
Post by: getk on September 05, 2013, 02:08:08 PM

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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: getk on September 03, 2013, 02:00:28 PM