EasyUI Forum
July 17, 2024, 04:28:49 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: jquery EasyUI pagination  (Read 23785 times)
cspeerly
Newbie
*
Posts: 7


View Profile Email
« 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


View Profile Email
« 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


View Profile Email
« 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


View Profile Email
« 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]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!