前端分页函数基于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>  跳转</div></td>
<td width="3%"><select id="_page_list" style="width:80px" onchange="gotoPage(this);"></select></td>
</tr>
</table>
</form>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值