EasyUI Forum

General Category => General Discussion => Topic started by: cspeerly on September 04, 2012, 06:23:15 PM

Title: jquery EasyUI pagination
Post by: cspeerly 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 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

<script type="text/javascript">
url: 'get_users.php',
saveUrl: 'save_user.php',
updateUrl: 'update_user.php',
destroyUrl: 'destroy_user.php',
<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>

<table id="dg" title="My Users" style="width:700px;height:250px"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="false">
<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>
<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>


Thanks alot if you can help

Title: Re: jquery EasyUI pagination
Post by: stworthy 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.
pageList: [5,10,15,20],
height: 'auto',
scrollbarSize: 0,

Title: Re: jquery EasyUI pagination
Post by: cspeerly 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.


Title: Re: jquery EasyUI pagination
Post by: cspeerly 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

view: detailview,
return '<div class="ddv"></div>';
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');

pageList: [5,10,15,20],
height: 'auto',
scrollbarSize: 0


I loose the expand link to edit that row