前端分页函数基于Ext的2.0.2版本

一套前端分页函数基于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>&nbsp;&nbsp;跳转</div></td>
	    <td width="3%"><select id="_page_list" style="width:80px" onchange="gotoPage(this);"></select></td>
  	</tr>
</table>
</form>
</body>