Print Page - allow initial data in server-side data grid

Title: allow initial data in server-side data grid
Post by: jpierce on May 07, 2013, 08:07:15 AM

I'm trying to switch to EasyUI grid from DataTables. But it seems the server-side grid doesn't support a feature that DataTables does that I really need. DT allows you to tell it there is initial data in the existing table so you don't have to make a second trip to the server to get it. Our server serves up the table with that initial page of data in it and uses the DataTable's iDeferLoading option to tell it to only request more data from the server when needed.

So far I'm thinking I will have to ditch the automatic loading and define my own loader function. Wish there was built in support for this as in DataTables, as it seems a common design pattern.

FYI, I also posted this here:
http://jquery-easyui.wikidot.com/forum/t-650145/allow-initial-data-in-server-side-data-grid

But I'm not sure if that's really all that lively of a place for discussion.

Title: Re: allow initial data in server-side data grid
Post by: stworthy on May 07, 2013, 07:11:27 PM

There is no built in feature similar to 'iDeferLoading' but customizing the loader can do the same thing. Here is the simple implementation:

Code:

	<script>
		function myloader(param, success, error){
			var opts = $(this).datagrid('options');
			if (!opts.url) return false;
			if (!opts.loaded) {
				var data = $(this).datagrid('getData');
				data.total = opts.iDeferLoading;
				$(this).datagrid('getPager').pagination('refresh',{total:data.total});
				opts.loaded = true;
				return false;
			}
			$.ajax({
				type: opts.method,
				url: opts.url,
				data: param,
				dataType: 'json',
				success: function(data){
					success(data);
				},
				error: function(){
					error.apply(this, arguments);
				}
			});
		}
	</script>

And the usage shows below:

Code:

	<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
			data-options="singleSelect:true,
				pagination:true,
				loader:myloader,
				iDeferLoading:100,
				url:'../datagrid/datagrid_data1.json'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>item1</td>
			</tr>
			<tr>
				<td>item2</td>
			</tr>
		</tbody>
	</table>

Title: Re: allow initial data in server-side data grid
Post by: jpierce on May 13, 2013, 08:42:13 AM

Thanks for the reply with the sample code. I'll give it a shot. This is along the lines of what I vaguely had in mind as a workaround.

Is there a "wishlist" for EasyUI? Can I add this to it or could you?

Thanks again.

Title: Re: allow initial data in server-side data grid
Post by: jpierce on May 16, 2013, 09:34:21 AM

Just wanted to say that I finally got a chance to plug this in and it works GREAT. Thanks again.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jpierce on May 07, 2013, 08:07:15 AM