AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js实现分页的几个源码，看完基本就懂了

2015-10-18 819
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 第一种：     addUser.html                   显示有的用户界面                                                          名称              ...
第一种：
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>addUser.html</title>
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="../js/wpCalendar.js">
</script>
 </head>
 <body>
  <div align="center">
   <h1>
    显示有的用户界面
   </h1>
   <div
    style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%">
    <table border="1px" cellpadding="0" cellspacing="0" id="tusers">
     <thead>
      <tr>
       <th>
        <input type="checkbox" name="chbk" id="chbk1" />
       </th>
       <th>
        名称
       </th>
       <th>
        性别
       </th>
       <th>
        邮箱
       </th>
       <th>
        出生日期
       </th>
       <th>
        操作
       </th>
      </tr>
     </thead>
     <tbody id="users">
     </tbody>
    </table>
    <div id="pages">
    </div>
   </div>
   <div style="border: 1px blue solid;">
    <form>
     <table id="divs">
      <tbody id="addUsers">
       <tr>
        <td>
         用户名:
        </td>
        <td>
         <input type="text" name="name" id="name" />
        </td>
       </tr>
       <tr>
        <td>
         性别:
        </td>
        <td>
         <select id="sex">
          <option value="男">
           男
          </option>
          <option value="女">
           女
          </option>
         </select>
        </td>
       </tr>
       <tr>
        <td>
         邮箱:
        </td>
        <td>
         <input type="text" name="email" id="email" />
        </td>
       </tr>
       <tr>
        <td>
         出生日期:
        </td>
        <td>
         <input type="text" id="bir" name="bir" />
         <input type=button value="点击看我"
          onclick="showCalendar(this,document.all.bir)">
        </td>
       </tr>
       <tr id="addu">
        <td colspan="2">
         <input type="button" value="添加" onclick="addUser()" id="add" />
        </td>
       </tr>
       <tr id="addu1">
        <td colspan="2">
         <input type="button" value="修改" id="upduser" />
        </td>
       </tr>
      </tbody>
     </table>
    </form>
   </div>
  </div>
 </body>
</html>
<script>
window.onload = function() {
 document.getElementByIdx_x("addu1").style.display = "none";
}
function addUser() {
 var name = document.getElementByIdx_x("name").value;
 var sex = document.getElementByIdx_x("sex").value;
 var email = document.getElementByIdx_x("email").value;
 var bir = document.getElementByIdx_x("bir").value;
 //获取表格节点对象
 var tusers = document.getElementByIdx_x("tusers");
 //创建行
 var tr1 = document.createElement_x("tr");
 var cbk = document.createElement_x("td");
 var tname = document.createElement_x("td");
 var tsex = document.createElement_x("td");
 var temail = document.createElement_x("td");
 var tbir = document.createElement_x("td");
 var toper = document.createElement_x("td");
 var cbk1 = document.createElement_x("input");
 cbk1.setAttribute("type", "checkbox");
 cbk1.setAttribute("name", "chbk");
 cbk.appendChild(cbk1);
 tname.appendChild(document.createTextNode(name));
 tsex.appendChild(document.createTextNode(sex));
 temail.appendChild(document.createTextNode(email));
 tbir.appendChild(document.createTextNode(bir));
 var adelete = document.createElement_x("a");
 var aupdate = document.createElement_x("a");
 adelete.setAttribute("href", "#");
 aupdate.setAttribute("href", "#");
 adelete.appendChild(document.createTextNode("删除 |"));
 aupdate.appendChild(document.createTextNode("修改"));
 toper.appendChild(adelete);
 toper.appendChild(aupdate)
 //往行中添加
 tr1.appendChild(cbk);
 tr1.appendChild(tname);
 tr1.appendChild(tsex);
 tr1.appendChild(temail);
 tr1.appendChild(tbir);
 tr1.appendChild(toper);
 var users = document.getElementByIdx_x("users");
 users.appendChild(tr1);
 tusers.appendChild(users);
 //删除操作
 adelete.onclick = function() {
  users.removeChild(adelete.parentNode.parentNode);
 }
 //修改操作
 aupdate.onclick = function() {
  document.getElementByIdx_x("addu").style.display = "none";
  document.getElementByIdx_x("addu1").style.display = "block";
  var utr = aupdate.parentNode.parentNode;
  var utrs = utr.childNodes;
  document.getElementByIdx_x("name").value = utrs[1].innerHTML;
  document.getElementByIdx_x("sex").value = utrs[2].innerHTML;
  document.getElementByIdx_x("email").value = utrs[3].innerHTML;
  document.getElementByIdx_x("bir").value = utrs[4].innerHTML;
  var upUser = document.getElementByIdx_x("upduser");
  upUser.onclick = function() {
   utr.childNodes[1].innerHTML = document.getElementByIdx_x("name").value;
   utr.childNodes[2].innerHTML = document.getElementByIdx_x("sex").value;
   utr.childNodes[3].innerHTML = document.getElementByIdx_x("email").value
   utr.childNodes[4].innerHTML = document.getElementByIdx_x("bir").value
   document.getElementByIdx_x("addu1").style.display = "none";
   document.getElementByIdx_x("addu").style.display = "block";
  }
 }
 //当添加用户的时候调用分页技术
 testPage()
}
//定义分页标签节点对象并创建
var indexPage = document.createElement_x("a");
var upPage = document.createElement_x("a");
var downPage = document.createElement_x("a");
var endPage = document.createElement_x("a");
var nowpage = 1;
//分页技术的实现
function testPage() {
 var tbodyUsers = document.getElementByIdx_x("users");
 var trUsers = tbodyUsers.getElementsByTagName_r("tr");
 //获取总记录数
 var countRecord = trUsers.length;
 //每页显示的记录数
 var PAGESIZE = 2;
 //总页数
 var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE
   : Math.ceil(countRecord / PAGESIZE));
 //当前页信息
 // =======>从那条记录开始 (nowpage-1)*PAGESIZE;
 //var nowpage = countPage;
 //获取创建分页标签的节点对象
 var pages = document.getElementByIdx_x("pages");
 //如果没有创建分页标签的节点则创建节点对象
 if (!pages.hasChildNodes()) {
  getPages(nowpage);
 }
 //当点击首页时的操作
 indexPage.onclick = function() {
  nowpage = 1;
  //显示首页的记录
  indexPageInfo(countRecord, trUsers);
 }
 //当点击上一页的操作
 upPage.onclick = function() {
  if (nowpage - 1 > 1) {
   nowpage -= 1;
  } else {
   nowpage = 1;
   indexPageInfo(countRecord, trUsers);
  }
  //显示上一页记录
  var startindex = (nowpage - 1) * PAGESIZE;
  alert(startindex + "====================++++++");
  var endindex = startindex + PAGESIZE;
  PageInfo(startindex, endindex, countRecord, trUsers)
 }
 //当点击下一页的操作
 downPage.onclick = function() {
  if (nowpage + 1 >= countPage) {
   nowpage = countPage;
  } else {
   nowpage += 1;
  }
  alert(nowpage + "-----------------");
  //显示上一页记录
  var startindex = (nowpage - 1) * PAGESIZE;
  alert(startindex + "====================++++++");
  var endindex = startindex + PAGESIZE;
  alert(startindex + "-----" + endindex + "---");
  PageInfo(startindex, endindex, countRecord, trUsers)
 }
 //当点击最后一页的操作
 endPage.onclick = function() {
  nowpage = countPage;
  if (nowpage > 1) {
   var startindex = (nowpage-1)*PAGESIZE;
   for ( var i = 0; i < countRecord; i++) {
    if (i < startindex) {
     trUsers[i].style.display = "none";
    } else {
     trUsers[i].style.display = "block";
    }
   }
 
第二种：
<script language="JavaScript">
var totalRecordNum = <%=totalRecordNum%>;//总记录条数(从java程序中获取)
var currentPageNumber = 1;//当前页号
if(totalRecordNum==0)
{
 currentPageNumber = 0;
}
var perPageRecordNum = 5;//每页记录条数(js中设置)
//计算总页数
var totalPageNumber = Math.ceil(totalRecordNum/perPageRecordNum);
var startShowPage ;//开始显示页记录号数
var endShowPage ;//结束显示页记录号数
//回车键和点击"GO"图片的效果一样
function keyDown() {
  if(event.keyCode == 13){
    goToPage();
  }
}
//跳到指定页
function goToPage()
{
   if(totalRecordNum != 0)
   {
  var pageNo = document.BillQueryForm.pageNum.value;
  //校验页号
  if((/[^0-9]/gi.test(pageNo)) | pageNo.length==0)
     {
   alert("页数必须为数字!");
   return;
     }
     else
     {
        if((pageNo > totalPageNumber)|(pageNo<1))
       {
         alert("你所输入的页数超出范围！");
   return;
       }
     }
  //跳转到指定页
   startShowPage = (pageNo-1)*perPageRecordNum;
   endShowPage  = pageNo*perPageRecordNum;
   exeShowPage();
   currentPageNumber = pageNo;
   curPageNo.innerHTML = currentPageNumber;
   totalPageNo.innerHTML = totalPageNumber; 
 }
}
//跳转到第一页
function goToFirstPage()
{
   if(totalRecordNum != 0)
   {
  startShowPage = 0*perPageRecordNum;
  endShowPage  = 1*perPageRecordNum;
  currentPageNumber = 1;
  exeShowPage();
  curPageNo.innerHTML = currentPageNumber;
  totalPageNo.innerHTML = totalPageNumber;
 }
}
function goToLastPage()
{
   if(totalRecordNum != 0)
   {
  if(totalRecordNum%perPageRecordNum==0)//除尽
  {
   var tempVal = totalRecordNum/perPageRecordNum;
     startShowPage = (tempVal-1)*perPageRecordNum;
    endShowPage  = tempVal*perPageRecordNum;
  }
  else
  { 
     var tempVal = totalRecordNum%perPageRecordNum;//得到余数,就是最后一页要显示的记录条数
     startShowPage = totalRecordNum-tempVal;
      endShowPage  = totalRecordNum;
  }
  currentPageNumber=totalPageNumber;
  exeShowPage(); 
  curPageNo.innerHTML = currentPageNumber;
  totalPageNo.innerHTML = totalPageNumber;
 }
}
function goToNextPage()
{
   if(totalRecordNum != 0)
   {
    if(currentPageNumber< totalPageNumber)
    {
   currentPageNumber = Number(currentPageNumber)+1;   
   startShowPage = (currentPageNumber-1)*perPageRecordNum;
   endShowPage  = currentPageNumber*perPageRecordNum;
   exeShowPage();
   curPageNo.innerHTML = currentPageNumber;
   totalPageNo.innerHTML = totalPageNumber;
  }
  else
  {
   alert("当前页已经是最后一页了!");
  } 
 }
}
function goToBeforePage()
{
   if(totalRecordNum != 0)
   {
     if(currentPageNumber>1)
     {
   currentPageNumber = currentPageNumber-1;
   startShowPage = (currentPageNumber-1)*perPageRecordNum;
   endShowPage  = currentPageNumber*perPageRecordNum;
   exeShowPage(); 
   curPageNo.innerHTML = currentPageNumber;
   totalPageNo.innerHTML = totalPageNumber;
  }
  else
  {
   alert("当前页已经是第一页了!");
  } 
 }
}
function exeShowPage()
{   
  for(var i = 0; i<totalRecordNum;i++)
  {
      if ((i>=startShowPage)&&(i<endShowPage))
     {
        document.getElementByIdx_x("row"+i).style.display="";
     }
     else
     {
    document.getElementByIdx_x("row"+i).style.display="none";
   }
  } 
} 
function submitQuery()
         {
         var sForm = document.JXCardNumQueryForm;
    if(sForm.elements["jxCardVO.jxcardid"].value==""){
       alert("请输入您要查询的卡号！");
    sForm.elements["jxCardVO.jxcardid"].focus();
       return 0;
             }
    if(sForm.elements["jxCardVO.password"].value==""){
       alert("请输入您要查询的密码！");
    sForm.elements["jxCardVO.password"].focus();
        return 0;
             }
     sForm.action="jxCardNumQuery.do?type=dxk";
      sForm.submit();
            return;
       }
         function cancelQuery()
         {
             window.history.go(-1);
         }
        
         function check()
         {
         if(document.all("card_no").value==""){
           alert("卡号不能为空，请输入卡号！");
           document.all("card_no").focus();
           return false;
         }
      if(document.all("password").value==""){
        alert("密码不能为空!");
        document.all("password").focus();
        return false;
       }
       return true;
      }
//-->
</script>
<body onLoad="javascript:goToFirstPage();">
                   
                   <%if(totalRecordNum!=0) {%>
        <tr>
         <td colspan='4' align="right">
          当前第<span id="curPageNo"></span>页/总计<span id="totalPageNo"></span>页&nbsp;&nbsp;
            <a onClick="javascript:goToFirstPage();" style="cursor:hand;"><img src="images/page_top.gif" width="9" height="9" border="0">第一页</a>
            &nbsp;&nbsp;
            <a onClick="javascript:goToBeforePage();" style="cursor:hand;"><img src="images/page_prev.gif" width="9" height="9" border="0">上一页</a>
            &nbsp;&nbsp;
            <a onClick="javascript:goToNextPage();" style="cursor:hand;">下一页<img src="images/page_next.gif" width="9" height="9"></a>
            &nbsp;&nbsp;
            <a onClick="javascript:goToLastPage();" style="cursor:hand;">最后一页<img src="images/page_end.gif" width="9" height="9" border="0"></a>
             &nbsp;&nbsp;
           <input type="text" id="pageNum" name="pageNum" size="5"  onkeydown="javascript:keyDown();">
           <input type="button" class="orangebtn_s" value="Go!" onclick="javascript:goToPage();" />
         
         </td>
        </tr>
      <%}
      else{%>
       <tr>
        <td colspan='4' align="right">
         <span id="curPageNo"></span>
         <span id="totalPageNo"></span>
        </td>
       </tr>
      <%}%>
      </logic:present>                   
                </table>    
              </td>
            </tr>
      </table> 
  
 </html:form>
若转载请注明出处！若有疑问，请回复交流！
文章标签：
JavaScript
前端开发
Java
Go
数据安全/隐私保护
关键词：
JavaScript源码
JavaScript分页
JavaScript实现
java牛
目录
相关文章
疯狂的猿
|
1月前
|
JavaScript
JS实现简单的打地鼠小游戏源码
这是一款基于JS实现简单的打地鼠小游戏源码。画面中的九宫格中随机出现一个地鼠，玩家移动并点击鼠标控制画面中的锤子打地鼠。打中地鼠会出现卡通爆破效果。同时左上角统计打地鼠获得的分数
疯狂的猿
55 1
派大鑫的工作室
|
2月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
派大鑫的工作室
30 0
疯狂的猿
|
5天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿，其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
22 2
疯狂的猿
|
22天前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果，很有创意的发送邮件、联系内容等表单，基于ractive.js实现的动画效果，以发送信件的方式。
疯狂的猿
24 1
温轻舟
|
25天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
110 1
疯狂的猿
|
1月前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏，捞出海里的鱼，捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用，有需要的朋友可以直接下载使用，本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码！
疯狂的猿
29 3
疯狂的猿
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果，可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素，向下拖拽可实现删除效果，简单实用，欢迎下载
疯狂的猿
41 4
疯狂的猿
|
1月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
疯狂的猿
24 2
疯狂的猿
|
1月前
|
JavaScript
JS实现的虚化雪景动态背景特效源码
JS实现的虚化雪景动态背景特效源码是一段基于JS实现的虚化雪景动态背景动画效果代码，非常有意思，欢迎对此特效感兴趣的朋友前来下载参考。
疯狂的猿
31 4
疯狂的猿
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码，在公路上开车网页小游戏源代码。
疯狂的猿
55 0
html5+three.js公路开车小游戏源码

热门文章

最新文章

  • 1
    Node.js 中流操作实践
  • 2
    js数组遍历some,foreach,map,filter,every对比
  • 3
    JavaScript右下角信息提示插件Notyf
  • 4
    《JavaScript框架设计》——1.4　类型的判定
  • 5
    深入理解JavaScript系列（14）：作用域链(Scope Chain)
  • 6
    JavaScript学习之旅-9（原创）
  • 7
    【温故而知新-Javascript】使用Web存储
  • 8
    前端 时间个性化 插件 jquery.timeago.js
  • 9
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 10
    JavaScript FAQ（六）——字符串
  • 1
    React和Next.js开发常见的HTTP请求方法
    124
  • 2
    JavaScript数据类型归纳，架构师花费近一年时间整理出来的前端核心知识
    42
  • 3
    前端 JS 经典：ES6 和 CommonJs 用法
    41
  • 4
    前端 JS 经典：宏任务、微任务、事件循环（EventLoop）
    65
  • 5
    前端 JS 经典：JSON 对象
    43
  • 6
    前端 JS 经典：递归
    41
  • 7
    前端 JS 经典：i，i++，++i区别
    59
  • 8
    前端 JS 经典：Math 常用方法汇总
    92
  • 9
    JavaScript：this-关键字，2024中级前端开发面试解答
    38
  • 10
    前端 JS 经典：let、const、var 区别
    39

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Node.js 入门教程文档
  • Vue.js完全自学手册图文教程
  • Node.js 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解