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

用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);
}

时间: 2024-09-11 23:58:07

js下通过getList函数实现分页效果的代码_javascript技巧的相关文章

JS小功能(offsetLeft实现图片滚动效果)实例代码_javascript技巧

效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 245px;            height: 150px;            background: red;            margin: 250p

js仿百度有啊通栏展示效果实现代码_javascript技巧

效果图如下: 页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

js形成页面的一种遮罩效果实例代码_javascript技巧

用这锻代码 之前请先下载jquery库 复制代码 代码如下: var maskStackCount = 0; function mask(method){ //这里是你想要进行遮罩的窗口,我这里想要遮罩的是一个iframe窗口,也可以用var winObj=$(window) var winObj=window.top.$("body").find("iframe[name='dialognormaliframe']");         if(typeof met

JS实现当前页居中分页效果的方法_javascript技巧

本文实例讲述了JS实现当前页居中分页效果的方法.分享给大家供大家参考.具体实现方法如下: function show_page(cur_pc) { var cp=cur_pc; //curent page count var tp=this.p; //total page count var sp=this.pc; //show page count var bp; //begin page count var ep; //end page count if(sp%2==0) sp=sp+1;

js图片轮播效果实现代码_javascript技巧

首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给它添

js实现同一页面多个运动效果的方法_javascript技巧

本文实例讲述了js实现同一页面多个运动效果的方法.分享给大家供大家参考.具体分析如下: 实现原理,就是在调用的时候,给这五个元素,循环加上事件.需要注意的是,每个元素的定时器需要分开. 要点一: var speed = (target - obj.offsetWidth)/8; 缓冲运动效果,一开始速度很快,然后越来越慢,直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0,则向上取整,如果速度小于0,则向下取整. 要点

js实现简单选项卡与自动切换效果的方法_javascript技巧

本文实例讲述了js实现简单选项卡与自动切换效果的方法.分享给大家供大家参考.具体分析如下: 这里再上篇<js实现简单的可切换选项卡效果>基础上,进一步实现可以自动切换的切换效果,用这种效果就可以做简单的焦点图了. 说明: 设置一个标识数字置为0,写一个每过几秒标识+1,执行切换效果的函数,然后执行. 当标识超过当前选项卡长度让标识置为0. 在鼠标移到选项卡的时候关闭定时器,鼠标移走的时候打开定时器. <!DOCTYPE html> <html> <head>

js实现类似jquery里animate动画效果的方法_javascript技巧

本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

js实现仿QQ秀换装效果的方法_javascript技巧

本文实例讲述了js实现仿QQ秀换装效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <he