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

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

(0)

相关推荐

  • javascript 新闻标题静态分页代码 (无刷新)

       一个模板,从数据库取n条记录,生成静态. 做单页面的静态化,索引页面是用JS对数组进行组合的. 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: 复制代码 代码如下: function title_array(title, link_add, store_time) { this.title = title; this.link_add = link_add; this.store_t

  • 心扬JS分页函数代码

    复制代码 代码如下: <!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 http-equiv=&qu

  • javascript 支持页码格式的分页类

    但是他们插件的附属功能很多又不需要,而且没必要就为了这么一个功能区引用这个库,为速度考虑吧,当然你服务器好也行,但是其实这个效果不是必须的,但是觉的会常用,所以就包装成类了,供以后使用,也供有需要的人学习使用. 下面只是一个简单的demo,用的话自己可以在编辑页码样式,有默认的格式.不废话了,自己看吧,有注释使用说明...类(3kb)使用可以参照demo,不明白使用的可以留言. 以后会慢慢写一些项目开发中常遇到的问题,以及解决方案,和大家学习分享. jpage.js 复制代码 代码如下: /*

  • js 分页代码带切换效果

    载入需要点时间,请稍微等待. * @copyright 2000-2005 GCSOFT.COM & ETNG.NET * @license http://www.php.net/license/3_0.txt PHP License 3.0 * @version SVN: $Id: page.html 21 2006-01-22 09:35:58Z etng $ * @link $HeadURL: svn://dev.gccms.net/trunk/page.html $ * @see * @

  • 简单的js分页脚本

    复制代码 代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script>

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

    用js实现页面的分页: 复制代码 代码如下: <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#D2EBF3;" height="32"> <tr><td align="right" bgColor="#

  • 微信小程序实现下拉刷新和上拉分页效果的方法详解

    目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2

  • vue+Element-ui实现分页效果实例代码详解

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

  • js+flash实现的5图变换效果广告代码(附演示与demo源码下载)

    本文实例讲述了js+flash实现的5图变换效果广告代码.分享给大家供大家参考,具体如下: 这是一款类似淘宝图片广告的js+flash广告代码.非常美观实用! 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

  • mybatis分页效果实现代码

    本文为大家分享了mybatis分页效果展示的具体代码,供大家参考,具体内容如下 mybatis版本3.4以下 结构: spring-mvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org

  • layui分页效果实现代码

    本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css" > </head> <body

  • Spring Boot和Thymeleaf整合结合JPA实现分页效果(实例代码)

    在项目里,我需要做一个Spring Boot结合Thymeleaf前端模版,结合JPA实现分页的演示效果.做的时候发现有些问题,也查了现有网上的不少文档,发现能全栈实现的不多,所以这里我就把我的做法,全部代码和步骤贴出来供大家参考. 1 创建项目,用pom.xml引入依赖 这里将创建名为ThymeleafWithDB的Maven,在pom.xml里引入如下的依赖包. <dependencies> <dependency> <groupId>org.springframe

  • js使用swiper实现层叠轮播效果实例代码

    前言 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好. 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容 实现过程: 一.移动端-需求swiper 4.0.3实现层叠轮播 二.实现效果如下 三.方案:查找了下发现使用swiper的切换效果coverflowEffect可以实现 1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式 2.coverflow的属性: rotate:slide做3d旋转时Y轴的旋转角

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

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

  • JS下拉框内容左右移动效果的具体实现

    复制代码 代码如下: <HTML><HEAD><TITLE>选择下拉菜单</TITLE><META NAME="Description" CONTENT="Power by hill"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></HEAD><

随机推荐