javascript分页效果的实现

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量626 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript function excel xhtml html list
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aspgreener/article/details/4793074
版权

现在公司有很多ministe，都有公布获奖名单的页面。而且这些页面都是静态的。但是由于有时候获奖的人数众多，不得不设计成分页的效果。目前公司的coding针对这种情况没有很好的解决方法。于是今天我抽空写了一个简单的基于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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript 获奖名单</title>
<script language="javascript" type="text/javascript">
//[CDATA[
   var records = [{no:1,name:"gordon",tel:"13813866456"},
      {no:2,name:"gordon",tel:"13813866456"},
      {no:3,name:"gordon",tel:"13813866456"},
      {no:4,name:"gordon",tel:"13813866456"},
      {no:5,name:"gordon",tel:"13813866456"},
      {no:6,name:"gordon",tel:"13813866456"},
      {no:7,name:"gordon",tel:"13813866456"},
      {no:8,name:"gordon",tel:"13813866456"},
      {no:9,name:"gordon",tel:"13813866456"},
      {no:10,name:"gordon",tel:"13813866456"},
      {no:11,name:"gordon",tel:"13813866456"},
      {no:12,name:"gordon",tel:"13813866456"},
      {no:13,name:"gordon",tel:"13813866456"},
      {no:14,name:"gordon",tel:"13813866456"},
      {no:15,name:"gordon",tel:"13813866456"},
      {no:16,name:"gordon",tel:"13813866456"},
      {no:17,name:"gordon",tel:"13813866456"},
      {no:18,name:"gordon",tel:"13813866456"},
      {no:19,name:"gordon",tel:"13813866456"},
      {no:20,name:"gordon",tel:"13813866456"},
      {no:21,name:"gordon",tel:"13813866456"},
      {no:22,name:"gordon",tel:"13813866456"},
      
      ];
   var curPage = 1;
   var pageCount = 0;
   var pageSize = 10;
  
   //获得指定页码内容
   function GetPage(pageIndex)
   {
    //获取总页数
    GetPageCount();
   
    if(isNaN(pageIndex))
     curPage = 1;
    curPage = pageIndex;
    if(curPage<0)
     curPage = 1;
    if(curPage>pageCount)
     curPage = pageCount;
   
    //设置分页内容
    ShowList(curPage);
   
    var strPage = "";
   
    // 设置分页页码
    for(var i=1;i<=pageCount;i++)
    {
     if(i==curPage)
      strPage += "<b>"+i+"</b>";
     else
      strPage += "<a href='javascript:GetPage(" + i + ");'>"+i+"</a>";
    }
   
    $("page").innerHTML = strPage;
   
    // 设置上一页，下一页
    GetPrePage();
    GetNextPage();
   }
  
   //显示列表内容
   function ShowList(pageIndex)
   {
    var strList="";
    var obj;
   
    for(var j=(pageIndex-1)*pageSize;j<pageIndex*pageSize;j++)
    {
     if(j<records.length-1)
     {
      obj = records[j];
      strList += "<dl><dd>序号："+ obj["no"] +" 姓名："+obj["name"] +" 手机："+ obj["tel"] +"</dd><dl>";
     }
      else
     {
      break;
     }
    }
    $("list").innerHTML = strList;
   }
  
   //获取页码数
   function GetPageCount()
   {
    pageCount = parseInt(Math.ceil(records.length*1.0/pageSize),10);
   }
  
   //获取上一页
   function GetPrePage()
   {
    if(curPage>1)
     $("prevPage").innerHTML = "<a href='javascript:GetPage("+(curPage-1)+")'>上一页</a>";
    else
     $("prevPage").innerHTML = "上一页";
   }
  
   //获取下一页
   function GetNextPage()
   {
    if(curPage<pageCount)
     $("nextPage").innerHTML = "<a href='javascript:GetPage("+(curPage+1)+")'>下一页</a>";
    else
     $("nextPage").innerHTML = "下一页";
   }
  
   function $(o)
   {
    if(typeof(o)=="object")
     return o;
    return document.getElementById(o);
   }
  
   window.onload = function()
   {
    GetPage(1);
   }
//]]
</script>
</head>

<body>
<div id="list">

</div>
<div id="page"></div>
<div id="prevPage"></div>
<div id="nextPage"></div>
</body>
</html>
一般来讲，获奖名单都是pm给的excel格式，通过excel的CONCATENATE函数，就可以拼成需要的jason格式的数据，非常方便快捷。希望通过这个帖子能让coding的工作轻松一些。

 

如果大家有什么不明白的地方可以跟我联系，联系方式可以去小事一箩筐：http://www.xiaoshiyiluokuang.com ，最底部有我的联系方式。谢谢。

aspgreener
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Asp+AJAX静态分页 亲测 可用
04-13
Asp+AJAX静态分页 亲测 可用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Asp+AJAX静态分页</title> <style type="text/css"> <!-- body { text-align:center;font:14px Verdana,sans-serif; } a:link,a:visited { color:#00f;text-decoration:none; } a:hover { color:#f00;text-decoration:underline; } #main { width:450px;background:#f2f2f2;border:1px #999 solid;padding:10px;text-align:left;line-height:150%;margin:0 auto; } #title { width:100%;line-height:30px;border-bottom:1px #999 solid;display:table; } #left { float:left;width:50%;text-align:left;font-size:14px;font-weight:bold; } #right { float:left;width:50%;text-align:right; } #content { width:100%;margin:10px 0;clear:both; } #download { width:100%;margin:10px 0;line-height:150%; } --> </style> [removed] <!-- function createAjax() { //该函数将返回XMLHTTP对象实例 var _xmlhttp; try { _xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的创建方式 } catch (e) { try { _xmlhttp=new XMLHttpRequest(); //FF等浏览器的创建方式 } catch (e) { _xmlhttp=false; //如果创建失败，将返回false } } return _xmlhttp; //返回xmlhttp对象实例 } function getweblist(page) { //该函数用来获取分页数据 var xmlhttp=createAjax(); //创建变量xmlhttp，并将createAjax()函数创建的对象实例赋于它 if (xmlhttp) { //如果xmlhttp对象创建成功，则执行条件语句中的程序 var content=document.getElementById('content'); //获取页面中id为content的对象 xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true); //打开与服务器的连接，其中get为连接方式，server.asp为要连接的页面，有两个参数，其中第一个参数page为需要返回数据的页数,第二个参数n为一个随机数，这样每次发送的URL都会不一样，相当于都向服务器发出一个新的请求，避免浏览器缓存数据。 xmlhttp.onreadystatechange=function() { //为xmlhttp对象的readyState属性指定事件，改属性值改变时，则会执行其中的程序 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4并且xmlhttp.status==200时，执行条件中的程序，其中readyState有五个值，4为请求完成，是客户端向服务器提交的数据成功到达，status有N多值-_-!!，其中200为OK，是指服务器向客户端完成发送数据。 content[removed]=unescape(xmlhttp.responseText); //将服务器返回的数据解码并写入指定的ID中。 } else { content[removed]='<span>正在从服务器提取数据......</span>'; //如果服务器没有完成传送，则向用户提示正在传输。 } } xmlhttp.send(null); //向服务器发送请求，因为是get请求，会直接附在URL后面，所以这里括号中的数据为null，IE中也可以不写，但FF就必须加上null，否则会发送失败。 } } function edit() { //编辑分页显示条数的函数 var str='<form style="margin:0">每页显示 <input type="text" id="pagesize" size="3"> 条 <input type="button" id="savebtn" value="保存" onclick="save()"> <input type="button" id="cancelbtn" value="取消" onclick="rightinfo()"></form>' //定义html字符串 var right=document.getElementById('right'); //获得页面中的right对象。 right[removed]=str; //将str变量的值写入该对象中。 } function rightinfo() { //right对象中的原始信息，请在页面开始和被显示条数被修改后调用 document.getElementById('right')[removed]='<a href="[removed]void(edit())" title="修改每页显示条数">Edit</a>'; } function save() { //保存修改后的显示条数 var pagesize=document.getElementById('pagesize'); //这个就不写了，跟上面的用法一样。 if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) { //确定用户输入的新数据是不是一个数字 alert("请正确填写每页显示条数！ "); return; } var xmlhttp=createAjax(); //创建对象 if (xmlhttp) { xmlhttp.open('get','set.asp?pagesize='+pagesize.value+'&n='+Math.random(),true) //参上同看 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('right')[removed]=unescape(xmlhttp.responseText); //先写入从服务器返回的字符串，如果成功，会写入completed。 getweblist(1); //从新获取新修改后的第一页的数据 setTimeout('rightinfo()',3000); //3秒后将right对象的原始字符串写入。 } else { document.getElementById('pagesize').disabled=true; //将几个FORM表单的元素都设为不可改动 document.getElementById('savebtn').disabled=true; document.getElementById('cancelbtn').disabled=true; } } xmlhttp.send(null); //发送请求。 } } //--> [removed] </head> <body> <div id="main"> <div id="title"> <div id="left">Asp+AJAX静态分页</div> <div id="right"></div> </div> <div id="content"></div> </div> </body> </html>
超长文章(HTML格式)自动分页,用ASP和JS实现
谁谁的程序技术专栏
11-06 1570
原文出处: http://blog.mvpcn.net/jaron/archive/2004/07/15/2159.aspx 这两天看到有朋友提出文章自动分页的问题,贴出我原来系统中的一部分代码,供大家参照,看是否有需要改进的地方或有更好的建议,其实偶们公司最近的项目都是用c#,ASP已经很少用了...这里只贴出了一部分代码,有兴趣的朋友,可以在http://demo.jaron.cn 测试,
Asp +Js 无刷新分页
dengtai4781的博客
01-11 190
Default.aspx代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi...
JavaScript实现分页效果
10-20
总的来说，这个JavaScript分页效果的实现提供了基本的分页功能，可以通过调整和扩展代码来满足更复杂的需求。对于初学者来说，这是一个很好的实践案例，可以帮助理解如何使用JavaScript和CSS实现动态的前端交互效果...
原生javascript实现分页效果
10-19
主要为大家详细介绍了原生javascript实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现前端分页效果
10-15
本文将详细介绍如何使用JavaScript实现前端分页效果。 首先，我们需要了解分页的基本原理。前端分页通常包括以下几个关键元素：总条目数、每页显示的条目数、当前页数以及分页按钮（如“首页”、“上一页”、...
Asp.Net 2.0使用ICallbackEventHandler实现无刷新回调
aspgreener的专栏
03-05 2283
       AJAX技术所提倡的无刷新回调，在原来的技术中需要写大量的JavaScript代码或使用一些AJAX框架，使得开发效率和可维护性大大降低。其实ASP.NET2.0中，已经提供了这样的接口，这就是ICallbackEventHandler。A. ICallbackEventHandler 接口该接口用于指示控件可以作为服务器的回调事件的目标。ICallbackEventHandle
自己动手编写的jquery插件，模仿搜狐汽车图片库展示效果
aspgreener的专栏
12-03 1779
昨天接到电话，说客户希望做一个图片展示的效果，最好跟搜狐的汽车图片库展示效果类似，其效果连接如下： http://db.auto.sohu.com/modelpic-70358_detail.shtml?r=1245729162185#g=70358&p=285792 我看了一下，给我的感觉这个效果应该不难啊。与其改别人的javascript代码，不如自己亲手写一个，也练练手。好久没写脚本啦。：） 首先，我先研究了一下搜狐展示效果的htm
asp.net利用json填充下拉框及js动态添加表格行、删除表格行的示例
aspgreener的专栏
09-19 1404
我就不多说了，还是自己看代码吧，其中json.js就是我前面写的一个小的json填充select的框架。具体参照：http://blog.csdn.net/aspgreener/archive/2007/09/13/1783834.aspxgoogle_ad_client = "pub-2048279401139630";google_ad_slot = "8856771542";google_a
js一个项目中用到的脚本
aspgreener的专栏
07-09 1131
google_ad_client = "pub-2048279401139630";google_ad_slot = "8856771542";google_ad_width = 728;google_ad_height = 90;document.write("");//判断所有的选题是否进行勾选function IsChecked()...{    var j,flag,no;    
fck_editor 不采用正则表达式实现插入任意自定义图片标签的解决方法
aspgreener的专栏
08-13 789
google_ad_client = "pub-2048279401139630";google_ad_slot = "8856771542";google_ad_width = 728;google_ad_height = 90;document.write("");   最近在做一个项目的时候，遇到需要修改fck editor里的上传图片的功能。其中需要实现通过插入自定义标签来实现添加客户端上
js获取url参数的两种种方法
aspgreener的专栏
11-21 486
Javascript 获取链接(url)参数的方法 1、用正则匹配的方式：Javascript:1 function getQueryString(name) 2 {3     var reg = new RegExp("(^|//?|&)"+ name +"=([^&]*)(//s|&|$)", "i");4     if (reg.test(location.href)) re
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 353
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 411
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 191
vue 自定义滚动条同步拖动（移动端）
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 701
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
分页显示代码js.doc
12-11
这段代码是JavaScript实现的一个选项卡切换组件，作者为"井底的蛙"，创建日期为2008年2月4日。该脚本的功能是封装选项卡的效果，允许在HTML页面上动态切换不同内容区域。以下是对关键知识点的详细解释： 1. **选项...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值