Datagrid with filter and pagination

[Darrel]

Hello,

I'm want to use the datagrid control to load data from the database. However before trying the same I decided to use static values and go ahead based on the results. However I faced an issue.
Whenever the grid is getting loaded the web page on the browser hangs for a few seconds. Also the grid takes a long time to be displayed on the browser.

Later i made use of filters over the grid columns, but to filter through these sample 20 entries, it takes a lot of time, nearly 10-15 seconds....

Files i've included for the sample code.

Code:

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

Code written inside the body tag.....

Code:

<table id="dg" title="DataGrid" style="width:700px;height:380px" data-options="
	singleSelect:true,rownumbers:true,pageSize:50,pagination:true,
	data:data
	">
		<thead>
		<tr>
			<th data-options="field:'client',auto:true,sortable:true">Client Code</th>
			<th data-options="field:'name',auto:true,sortable:true,editor:'textbox'">Client Name</th>
			<th data-options="field:'testcode',auto:true,align:'right',sortable:true">Test Code</th>
			<th data-options="field:'testname',auto:true,sortable:true,editor:'textbox'">Test Name</th>
			<th data-options="field:'indexNo',auto:true,align:'center',sortable:true,editor:'textbox'">indexNo</th>
			<th data-options="field:'other_code',auto:true,align:'center',sortable:true">Other Code</th>
			<th data-options="field:'date1',auto:true,align:'center',sortable:true">Appl date</th>
			<th data-options="field:'qty',auto:true,align:'center',sortable:true,editor:{type:'numberbox',options:{precision:1}}">Qty</th>
			<th data-options="field:'costvalue',auto:true,align:'center',sortable:true,editor:{type:'numberbox',options:{precision:1}}">Cost Value</th>
			<th data-options="field:'moneypaid',auto:true,align:'center',sortable:true">Money Paid</th>
			<th data-options="field:'date2',auto:true,align:'center',sortable:true">Date 2</th>
			<th data-options="field:'remarks',auto:true,align:'center',sortable:true,editor:'textbox'">Remarks</th>
		</tr>
		</thead>
	</table>
	<script type="text/javascript" src="js/jquery-easyui-1.4.3/datagrid-filter.js"></script>
	<script type="text/javascript">
	//for simplicity sake i've used only 20 entries. However in real life scenario there would definitely be more records

        var data = [
            {"client":"ABCD","name":"ABCD","testcode":"ABCDEF08","testname":"asdadUasdasd","indexNo":"INF066A19020","other_code":"","date1":"29/10/2012","qty":"0","costvalue":"15.48","moneypaid":"0","date2":"-","remarks":"REMARKS :                           "},
	{"client":"DEFG","name":"DEFG","testcode":"FRCT101","testname":"asdadUasdasd","indexNo":"F20000000001","other_code":"","date1":"29/10/2012","qty":"2","costvalue":"10","moneypaid":"20","date2":"29/10/2012","remarks":"REMARKS :                           "},
	{"client":"HIJK","name":"HIJK","testcode":"UNHDFC01","testname":"asdadUasdasd","indexNo":"INF066H19068","other_code":"","date1":"30/11/2012","qty":"100","costvalue":"1","moneypaid":"100","date2":"-","remarks":"REMARKS :                           "},
	{"client":"LMNO","name":"LMNO","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"10/08/2011","qty":"0","costvalue":"10000000","moneypaid":"50000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"PQRS","name":"PQRS","testcode":"INFOSYS","testname":"asdadUasdasd","indexNo":"INE009A01020","other_code":"","date1":"10/07/2011","qty":"10","costvalue":"5","moneypaid":"50","date2":"-","remarks":"REMARKS :                           "},
	{"client":"TUVW","name":"TUVW","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"01/09/2011","qty":"10","costvalue":"10000000","moneypaid":"100000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"XYZA","name":"XYZA","testcode":"EQCOAL","testname":"asdadUasdasd","indexNo":"IN99292A1091","other_code":"","date1":"10/09/2011","qty":"3400","costvalue":"10","moneypaid":"34000","date2":"-","remarks":"REMARKS :                           "},
	{"client":"BCDE","name":"BCDE","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"10/08/2011","qty":"100","costvalue":"10000000","moneypaid":"1000000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"FGHI","name":"FGHI","testcode":"FRCT101","testname":"asdadUasdasd","indexNo":"F20000000001","other_code":"","date1":"29/10/2012","qty":"10","costvalue":"10","moneypaid":"100","date2":"29/10/2012","remarks":"REMARKS :                           "},
	{"client":"JKLM","name":"JKLM","testcode":"ALSTFC65","testname":"asdadUasdasd","indexNo":"INE721A07BA8","other_code":"","date1":"14/07/2011","qty":"100","costvalue":"1000","moneypaid":"100000","date2":"13/07/2011","remarks":"REMARKS :                           "},
	{"client":"NOPQ","name":"NOPQ","testcode":"EQCOAL","testname":"asdadUasdasd","indexNo":"IN99292A1091","other_code":"","date1":"10/09/2011","qty":"10000","costvalue":"10","moneypaid":"100000","date2":"-","remarks":"REMARKS :                           "},
	{"client":"RSTU","name":"RSTU","testcode":"EQCOAL","testname":"asdadUasdasd","indexNo":"IN99292A1091","other_code":"","date1":"10/09/2011","qty":"3000","costvalue":"15.48","moneypaid":"10","date2":"-","remarks":"REMARKS :                           "},
	{"client":"ABCD","name":"ABCD","testcode":"ABCDEF08","testname":"asdadUasdasd","indexNo":"INF066A19020","other_code":"","date1":"29/10/2012","qty":"0","costvalue":"15.48","moneypaid":"0","date2":"-","remarks":"REMARKS :                           "},
	{"client":"DEFG","name":"DEFG","testcode":"FRCT101","testname":"asdadUasdasd","indexNo":"F20000000001","other_code":"","date1":"29/10/2012","qty":"2","costvalue":"10","moneypaid":"20","date2":"29/10/2012","remarks":"REMARKS :                           "},
	{"client":"HIJK","name":"HIJK","testcode":"UNHDFC01","testname":"asdadUasdasd","indexNo":"INF066H19068","other_code":"","date1":"30/11/2012","qty":"100","costvalue":"1","moneypaid":"100","date2":"-","remarks":"REMARKS :                           "},
	{"client":"LMNO","name":"LMNO","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"10/08/2011","qty":"0","costvalue":"10000000","moneypaid":"50000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"PQRS","name":"PQRS","testcode":"INFOSYS","testname":"asdadUasdasd","indexNo":"INE009A01020","other_code":"","date1":"10/07/2011","qty":"10","costvalue":"5","moneypaid":"50","date2":"-","remarks":"REMARKS :                           ","row_qty_prcsn":"0"},
	{"client":"TUVW","name":"TUVW","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"01/09/2011","qty":"10","costvalue":"10000000","moneypaid":"100000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"XYZA","name":"XYZA","testcode":"EQCOAL","testname":"asdadUasdasd","indexNo":"IN99292A1091","other_code":"","date1":"10/09/2011","qty":"3400","costvalue":"10","moneypaid":"34000","date2":"-","remarks":"REMARKS :                           "},
	{"client":"BCDE","name":"BCDE","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"10/08/2011","qty":"100","costvalue":"10000000","moneypaid":"1000000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
        ];
        $(function(){
			var dg = $('#dg').datagrid({
				remoteFilter: false,
				pagination: true,
				pageSize: 10,
				pageList: [10,20,50,100]
			});
			dg.datagrid('enableFilter');
			dg.datagrid('loadData', data);

			function showFilters(){
				dg.datagrid('enableFilter', [{
					field:'qty',
					type:'numberbox',
					options:{precision:1},
					op:['equal','notequal','less','greater']
				},{
					field:'costvalue',
					type:'numberbox',
					options:{precision:1},
					op:['equal','notequal','less','greater']
				},{
					field:'moneypaid',
					type:'numberbox',
					options:{precision:1},
					op:['equal','notequal','less','greater']
				}]);
			}

			showFilters();
        });
    </script>

Now, I also get the error now whenever I filter or click on the pagination links to go to another page in the grid (Possibly because I previously was having around 220 records in the javascript data objec!):

"SCRIPT28: Out of stack space
datagrid-filter.js, line 592 character 4"


Fiddle link for the same example:      http://jsfiddle.net/DROCKS/pee6bx62/4/

Any help would be appreciated. Thanks in advance...

Regards,
Darrel Viegas.

[stworthy]

Please prevent from calling 'enableFilter' method more than once. The example below works fine.
http://jsfiddle.net/pee6bx62/5/

[Darrel]

Hello stworthy,

Thanks for your quick reply. I did the changes in my file as per your suggestion. However the grid is still loading quite slowly and filtering the details also slowly, maybe because I'm having 200+ records in the JSON object. (I had reduced the size of the JSON object to 20 to avoid increasing the size of the html code in the fiddle).

Is there any possible way to speed the process up? Like populate the data only for the first pagesize rows (for eg. 50 rows) from the database and then on click on the next/previous page links of the pagination bar get the next/previous set of data as per the page size??

Thanks in advance. 

Regards,
Darrel Viegas

[stworthy]

Don't use the auto column, please set a fixed width for columns. Also, please try to set 'nowrap' and 'autoRowHeight' properties.

Code:

$('#dg').datagrid({
  nowrap: true,
  autoRowHeight: false
});

[Darrel]

Thanks a million, stworthy!!!!!!

The last suggestion works like a charm!!!! I removed the auto property and replaced it with the width property, added nowrap as suggested. It loaded the page with 40000 records in just 20 seconds. Filtering was working in like 7-8 secs which is 10 times better than before.... Thanks a lot.

I had one more question related to pagination, can the screen get masked with the loading text whenever the user clicks the next/previous links in the pagination bar, and get unmasked when the data has been loaded successfully.

Keep up the good work.
God bless you!!!!

Regards,
Darrel Viegas.