jquery EasyUI pagination

EasyUI Forum

May 15, 2024, 02:58:27 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > General Discussion > jquery EasyUI pagination

Pages: [1]

« previous next »

Author

Topic: jquery EasyUI pagination (Read 22718 times)

cspeerly

Newbie

Posts: 7

jquery EasyUI pagination

« on: September 04, 2012, 06:23:15 PM »

I am starting to catch the hang of this, but i have several Problems

1) pagination - How can I set the number of rows like 5.10.15.20 instead of the defaults of 10, 20 etc
2) Then Hide the vertical scroll bar

See Live here http://HomersPHP.tzo.com/jqueryEASYUI/test-1/index.html

Code:

	<script type="text/javascript">
		$(function(){
			$('#dg').edatagrid({
				url: 'get_users.php',
				saveUrl: 'save_user.php',
				updateUrl: 'update_user.php',
				destroyUrl: 'destroy_user.php',
			});
		});
	</script>
</head>
<body>
	<h2>CRUD DataGrid</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip">&nbsp;</div>
		<div>Double click the row to begin editing.</div>
	</div>

	<table id="dg" title="My Users" style="width:700px;height:250px"
			toolbar="#toolbar" pagination="true" idField="id"
			rownumbers="true" fitColumns="true" singleSelect="false">
		<thead>
			<tr>
				<th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
				<th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
				<th field="address" width="50" editor="text">Address</th>
				<th field="city" width="50" editor="text">City</th>
				<th field="state" width="50" editor="text">State</th>
				<th field="zip" width="50" editor="text">Zip</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
	</div>

</

Thanks alot if you can help
Chuck


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: jquery EasyUI pagination

« Reply #1 on: September 04, 2012, 07:42:07 PM »

Reset the 'pageList' property to change the default page list values, set 'height' property to 'auto' to hide the vertical scroll bar.

Code:

$('#dg').edatagrid({
pageList: [5,10,15,20],
height: 'auto',
scrollbarSize: 0,
//...
});


	Logged

cspeerly

Newbie

Posts: 7

Re: jquery EasyUI pagination

« Reply #2 on: September 05, 2012, 09:25:46 AM »

Thank's again and again

That worked for the selection but the default on load still is at 10.
Is there a way to set the default to 5 when the page loads?

see it in action here http://homersphp.tzo.com/jqueryEasyUI/TEST-5/

and the scrollbarSize worked to.

Thank's
Chuck


	Logged

cspeerly

Newbie

Posts: 7

Re: jquery EasyUI pagination

« Reply #3 on: September 05, 2012, 10:38:51 AM »

Well it works and it don"t

1st, I guess I need the scrollbars and the window to resize so I can see all of the edit form.

2nd, When I put in

Code:

		$(function(){
			$('#dg').datagrid({
				view: detailview,
				detailFormatter:function(index,row){
					return '<div class="ddv"></div>';
				},
				onExpandRow: function(index,row){
					var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
					ddv.panel({
						border:false,
						cache:true,
						href:'show_form.php?index='+index,
						onLoad:function(){
							$('#dg').datagrid('fixDetailRowHeight',index);
							$('#dg').datagrid('selectRow',index);
							$('#dg').datagrid('getRowDetail',index).find('form').form('load',row);
						}
					});
					$('#dg').datagrid('fixDetailRowHeight',index);
				}
			});




			$('#dg').edatagrid({
				pageList: [5,10,15,20],
				height: 'auto',
				scrollbarSize: 0
			});


		});

I loose the expand link to edit that row


	Logged

Pages: [1]

« previous next »