|
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 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"> </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 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.
Code: $('#dg').edatagrid({ 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. Thank's Chuck 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 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 |