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

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

2015-10-18 818
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 第一种：     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 前端开发
JavaScript分页功能
JavaScript分页功能
派大鑫的工作室
29 0
疯狂的猿
|
2天前
|
JavaScript
JS实现的虚化雪景动态背景特效源码
JS实现的虚化雪景动态背景特效源码是一段基于JS实现的虚化雪景动态背景动画效果代码，非常有意思，欢迎对此特效感兴趣的朋友前来下载参考。
疯狂的猿
10 4
疯狂的猿
|
2天前
|
JavaScript
js实现的精美彩色tab选项卡切换特效源码
js实现的精美彩色tab选项卡切换特效源码是一段基于JS实现的文件夹tab选项卡切换效果，拥有彩色、单色两种选择，点击标签选项卡可实现相应的变色效果，非常有意思，欢迎对此段代码感兴趣的朋友前来下载使用。
疯狂的猿
8 2
疯狂的猿
|
1天前
|
JavaScript
JS实现简单的打地鼠小游戏源码
这是一款基于JS实现简单的打地鼠小游戏源码。画面中的九宫格中随机出现一个地鼠，玩家移动并点击鼠标控制画面中的锤子打地鼠。打中地鼠会出现卡通爆破效果。同时左上角统计打地鼠获得的分数
疯狂的猿
10 1
疯狂的猿
|
2天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画，js循环动画，简单的画面设计。非常丝滑有意思，欢迎对此代码感兴趣的朋友前来下载参考。
疯狂的猿
12 2
疯狂的猿
|
2天前
JS+SVG实现的滑块表情评价打分特效源码
JS+SVG实现的滑块表情评价打分特效源码是一段基于JS+SVG制作的表情评价打分效果代码，可以利用鼠标拖动滑块实现表情变化打分效果，支持手机端4个表情分段评价，会随着鼠标滑动的方向而变化
疯狂的猿
11 2
游客qeoynko2nmbgk
|
2月前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2：显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2：显示源码/显示预览、清除格式
游客qeoynko2nmbgk
16 0
Echarts技术专家
|
3月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现智慧门店可视化大屏！！附源码！！
Echarts+JS实现智慧门店可视化大屏！！附源码！！
Echarts技术专家
45 2
Echarts技术专家
|
3月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现农业指挥舱可视化大屏！！附源码！！
Echarts+JS实现农业指挥舱可视化大屏！！附源码！！
Echarts技术专家
52 1
张飞的猪
|
4月前
|
JavaScript 前端开发 程序员
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
JavaScript是Web标准语言，广泛应用于各类浏览器，造就了其最广泛部署的地位。Node.js的兴起扩展了JavaScript的使用场景，使其成为开发者首选语言。无论新手还是经验丰富的程序员，都能受益于学习JavaScript。[《JavaScript权威指南第7版》资源链接](https://zhangfeidezhu.com/?p=224)
张飞的猪
248 5
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    Rhino 是一个完全使用Java语言编写的开源JavaScript实现。Rhino通常用于在Java程序中，为最终用户提供脚本化能力。它被作为J2SE 6上的默认Java脚本化引擎。
  • 3
    Javascript之旅——第四站：parseInt中要注意的坑
  • 4
    JS语法作用域与词法作用域
  • 5
    在JavaScript面向对象编程中使用继承(3)
  • 6
    web worker 是运行在后台的 JavaScript，不会影响页面的性能。
  • 7
    《JavaScript应用程序设计》一一2.9 方法API的设计
  • 8
    javascript类型系统之Array
  • 9
    一看就会的Next.js App Router版 -- Routing（上）（一）
  • 10
    YY游戏云的angular js实践总结
  • 1
    事件触发、事件捕获与事件冒泡（js的问题）
    36
  • 2
    理解DOM树的加载过程（js的问题）
    28
  • 3
    为实例方法创建错误的引用（js的问题）
    34
  • 4
    在循环内错误使用函数定义（js的问题）
    31
  • 5
    高阶函数（js的问题）
    28
  • 6
    在浏览器中存储数组和对象（js的问题）
    66
  • 7
    混淆赋值运算符（=）和相等比较运算符（==, ===）（js的问题）
    33
  • 8
    为 setTimeout 或 setInterval 提供一个字符串作为第一个参数（js的问题）
    33
  • 9
    为实例方法创建错误的引用(js的问题)
    31
  • 10
    JS使用循环求100内奇数之和
    48

    • 相关课程

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

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月