js下通过getList函数实现分页效果的代码


Posted in Javascript onSeptember 17, 2010

用js实现页面的分页:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#D2EBF3;" height="32"> 
<tr><td align="right" bgColor="#f7f7f7" height="36"> 
<a href="javascript:void(0)" onclick="getPage(-1)" style="visibility :visible " id="up">上一页</a> 
<a href="javascript:void(0)" onclick="getPage(1)" style="visibility :visible " id="next">下一页</a> 
<a href="javascript:void(0)" onclick="getPage(0)" style="visibility :visible ">首页</a> 
<a href="javascript:void(0)" onclick="getPage(11)">尾 页</a> 
<form name="form1" id="form2"> 
<select name='PageCtl1_select' id="select" onchange='SD_Web_PageCtlGoOtherPage(this.value);' style="width: 30px"></select> //按下拉显示页数 
</form> 
</td> </tr> 
</table>

getPage()为js函数,如下:
//参数说明:lblPostsCount:总共记录条数,由getActivityCount获得;iPageIndex:全局变量,当前页数 
function getPage(page) 
{ 
if(page==0)//回到首页 
{ 
iPageIndex=1; 
document.form1.PageCtl1_select.options[iPageIndex-1].selected="true"; //下拉框显示第几页,数组从0开始 
getActivityList(1); 
} 
else if(page==11)//回到尾页 
{ iPageIndex=Math.round (lblPostsCount/6); 
document.form1.PageCtl1_select.options[iPageIndex-1].selected="true"; 
getActivityList(iPageIndex); 
} 
else //上一页,下一页 
{ 
iPageIndex=iPageIndex+page; 
if(iPageIndex<=0) //如果是第一页还点上一页,还是保持在第一页 
iPageIndex=1; 
else if(iPageIndex>Math.round (lblPostsCount/6))//如果是最后一页还点下一页,保持在最后一页 
iPageIndex=Math.round (lblPostsCount/6); 
else 
{ 
document.form1.PageCtl1_select.options[iPageIndex-1].selected="true"; 
getActivityList(iPageIndex);//调用List清单 
} 
} 
} 
function getActivityCount() //获取记录条数 
{ 
var variable=['strWhere']; 
var value=new Array(1); 
value[0]="iStatus=2 and iPublic=5"; 
newRequest("getActivityCount",variable,value,getAllActivityCountShow); 
beginRequest(); 
} 
function getAllActivityCountShow() 
{ 
var xmlhttp=xmlHttpRequest; 
  var str=xmlhttp.responseText; 

 var value=GetValue(str,"getActivityCountResult"); 

 lblPostsCount=value; //记录总数 
  document.form1.PageCtl1_select.length=0; //初始下拉框,把页数付给下拉框的value值和text显示; 
for(i=1;i<=Math.round (lblPostsCount/6);i++) 
{ 
var option=document.createElement("option"); 
option.value=i; 
option.text=i; 
document.form1.PageCtl1_select.options.add(option); 
} 
}

按下拉框显示第几页函数:

function SD_Web_PageCtlGoOtherPage(pageNo) 
{ 
getActivityList(pageNo); 
}
Javascript 相关文章推荐
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
jquery移动节点实例
Jan 14 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
前端开发的开始---基于面向对象的Ajax类
Sep 17 #Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 #Javascript
js下用eval生成JSON对象
Sep 17 #Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 #Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 #Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 #Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
php数组总结篇(一)
2008/09/30 PHP
php explode函数实例代码
2012/02/27 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
对python模块中多个类的用法详解
2019/01/10 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
详解Oracle块修改跟踪功能
2021/11/07 Oracle
KVM基础命令详解
2022/04/30 Servers