starleejay 2013-11-28
一套前端分页函数基于Ext的2.0.2版本
下载地址:http://extjs.com/deploy/ext-2.0.2.zip
需要导入Ext的js如下:
resources/css/ext-all.css
adapter/ext/ext-base.js
ext-all.js
build/locale/ext-lang-zh_CN.js
<script type="text/javascript"> var iTotlePg = parseInt("得到总页数totalpage"); //首次加载进行设置 function setPageList() { while(document.getElementById("_page_list").options.length > 0) //清空选中项 { document.getElementById("_page_list").options.remove(0); } for(var i = 1; i <= iTotlePg; i++) //set select options { newObj = new Option(i,i); document.getElementById("_page_list").add(newObj); } document.getElementById("_page_list").selectedIndex = parseInt("得到当前页数iCurrentPage") - 1; var total=parseInt("得到总记录数iTotalCount"); var beFirst="No"; if(total>10000 && beFirst=="Yes") { Ext.MessageBox.alert("", "本次查询满足条件的记录数过多,系统只能显示和导出前一万条记录,请缩小查询条件后继续查询。"); } if(total>0) { if(total>10000) { document.getElementById("_tip").innerHTML="查询完成,您本次查询到的记录条数为:"+10000; } else { document.getElementById("_tip").innerHTML="查询完成,您本次查询到的记录条数为:"+total; } } else if(beFirst == "Yes") { document.getElementById("_tip").innerHTML="查询完成,您本次查询到的记录条数为:"+total; } document.getElementById("_tip").className= "table-label-text-l"; } //去往第几页 function gotoPage(obj) { Ext.onReady(function(){ var pBar = new Ext.ProgressBar({width:300, text:'请稍候...'}); pBar.wait({interval: 200}); var pWin = new Ext.Window( { title: '执行中,请稍后', closable: false, modal: true , hidden:true, width:300, renderTo: document.body, draggable:false, resizable:false, items: pBar }) ; pWin.show(); }); var fm=document.formName; formName表示form表单的名称 fm.iCurrentPage.value=obj.value; fm.submit(); } //首页 function firstpage() { var fm=document.formName; formName表示form表单的名称 var cPage=parseInt("得到当前页数iCurrentPage"); if(cPage<=1) { return; } else { Ext.onReady(function(){ var pBar = new Ext.ProgressBar({width:300, text:'请稍候...'}); pBar.wait({interval: 200}); var pWin = new Ext.Window( { title: '执行中,请稍后', closable: false, modal: true , hidden:true, width:300, renderTo: document.body, draggable:false, resizable:false, items: pBar }) ; pWin.show(); }); fm.iCurrentPage.value=1; fm.submit(); } } //上一页 function previouspage() { var fm=document.formName; formName表示form表单的名称 var cPage=parseInt("得到当前页数iCurrentPage"); if(cPage<=1) { return; } else { Ext.onReady(function(){ var pBar = new Ext.ProgressBar({width:300, text:'请稍候...'}); pBar.wait({interval: 200}); var pWin = new Ext.Window( { title: '执行中,请稍后', closable: false, modal: true , hidden:true, width:300, renderTo: document.body, draggable:false, resizable:false, items: pBar }) ; pWin.show(); }); fm.iCurrentPage.value=cPage-1; fm.submit(); } } //下一页 function nextpage() { var fm=document.formName; formName表示form表单的名称 var cPage=parseInt("得到当前页数iCurrentPage"); var tPage=parseInt("得到总页数totalpage"); if(cPage>=tPage) { return; } else { Ext.onReady(function(){ var pBar = new Ext.ProgressBar({width:300, text:'请稍候...'}); pBar.wait({interval: 200}); var pWin = new Ext.Window( { title: '执行中,请稍后', closable: false, modal: true , hidden:true, width:300, renderTo: document.body, draggable:false, resizable:false, items: pBar }) ; pWin.show(); }); fm.iCurrentPage.value=cPage+1; fm.submit(); } } //尾页 function lastpage() { var fm=document.formName; formName表示form表单的名称 var cPage=parseInt("得到当前页数iCurrentPage"); var tPage=parseInt("得到总页数totalpage"); if(cPage>=tPage) { return; } else { Ext.onReady(function(){ var pBar = new Ext.ProgressBar({width:300, text:'请稍候...'}); pBar.wait({interval: 200}); var pWin = new Ext.Window( { title: '执行中,请稍后', closable: false, modal: true , hidden:true, width:300, renderTo: document.body, draggable:false, resizable:false, items: pBar }) ; pWin.show(); }); fm.iCurrentPage.value=tPage; fm.submit(); } } </script>
页面注意在body中初始化setPageList()函数
<body onload="setPageList()"> <form action="#" name="formName" method="post"> <input type="hidden" value="1" name="iCurrentPage"/> <table> <tr> <td align="left" id="_tip"><div></div></td> <td align="right" > <div class="table-label-text-r"> <a href="javascript:firstpage();" target="" onfocus="this.blur()">首页</a> <a href="javascript:previouspage();" target="" onfocus="this.blur()">上一页</a> 第[当前页数]页,共[总页数]页 <a href="javascript:nextpage();" target="" onfocus="this.blur()">下一页</a> <a href="javascript:lastpage();" target="" onfocus="this.blur()">尾页</a> </div> </td> <td width="3%"><div> 跳转</div></td> <td width="3%"><select id="_page_list" style="width:80px" onchange="gotoPage(this);"></select></td> </tr> </table> </form> </body>