分页：页码显示javascript

最新推荐文章于 2022-11-10 15:21:46 发布
最新推荐文章于 2022-11-10 15:21:46 发布
阅读量773 收藏
点赞数
分类专栏： javascript 文章标签： javascript function input button border express
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moliqin/article/details/4059512
版权

 <!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=gb2312" />
<title>分页：页码显示javascript</title>
<script>
 var ie=(document.getElementById && document.all);
 function clearChilds( parentObj){
  if ( parentObj.hasChildNodes()  ) {   
   var childs = parentObj.childNodes; 
   for(var i=childs.length-1;i>=0;i--){
    if ( childs[i].hasChildNodes() ) {
     clearChilds(childs[i]);
    }else {
     if ( childs[i].tagName == "INPUT" || childs[i].tagName == "input" ){ 
      if ( childs[i].id == "gotoTxt"){
       parentObj.removeChild(childs[i]);
      }     
     }else {         
      parentObj.removeChild(childs[i]);
     }
    }//else end
    
   }//for end
   
  }
 }
 function navigateClick(pageNumber){
  document.getElementById("currentPage").value = pageNumber;
  submitSearch();
 }
 
 var newNavigateClick=function(pageNumber){
  return function(){
   navigateClick(pageNumber);
  }
 }
 
 function createNavigateImg(imgName,parentObj,currentNumber) {  
  var img = document.createElement("img");
  img.setAttribute("border","0");
  img.setAttribute("src","<%=request.getContextPath() %>/images/sfdcdefectgui/"+imgName);
  img.style.verticalAlign = "text-bottom";
  img.style.cursor = "pointer";
   if(ie){
   img.attachEvent("onclick",newNavigateClick(currentNumber) );
  }else {
   img.addEventListener("click",newNavigateClick(currentNumber),false);
  }
  parentObj.appendChild(img);
 }
 
 function setNavigative(totalNumber,currentNumber) {
 
 // var allData = eval('(' + strData + ')');
 // var totalNumber = allData.pageControl.totalPage;
 // var currentNumber =  allData.pageControl.currentPage;
  var navDiv = document.getElementById("navigateDiv");
  
  clearChilds(navDiv);
  
  var spaceNode = document.createTextNode(" ");
  navDiv.appendChild(spaceNode); 
  var totalPage = document.createTextNode(totalNumber);
  navDiv.appendChild(totalPage);    
  
  var redFont = document.createElement("font");
  redFont.setAttribute("color","red");
  var currentTxtNum = document.createTextNode(" "+currentNumber);
  redFont.appendChild(currentTxtNum);  
  navDiv.appendChild(redFont);  
  
  var currentTototalPage = document.createTextNode("/"+totalNumber);
  navDiv.appendChild(currentTototalPage);  
  spaceNode = document.createTextNode("  ");
  navDiv.appendChild(spaceNode); 
  if ( currentNumber > 1) {
  
   spaceNode = document.createTextNode("  ");   
   navDiv.appendChild( spaceNode );
   createNavigateImg("home_page.gif",navDiv,1);
  
   spaceNode = document.createTextNode("  ");   
   navDiv.appendChild( spaceNode );
   createNavigateImg("previous_page.gif",navDiv,currentNumber);
 
  }
  
  //page number display
   var endNumber = 0;
   var beginNumber = 0;
   var dispNumber = 5;
   var  offSize = Math.floor( dispNumber/2);
  
   if ( currentNumber <=1 ){
    beginNumber = 1;
   if ( totalNumber <=dispNumber-1 )
    endNumber = totalNumber;
    else
      endNumber = beginNumber + dispNumber-1;
   }else if ( currentNumber >= totalNumber){
     endNumber = totalNumber;
      if (  totalNumber -(dispNumber-1) <= 0)
       beginNumber =1;
      else
       beginNumber = endNumber  -(dispNumber-1) ;
   } else {
      var forwardOffSize = 0;
      var backwardOffSize = 0;
      if ( (currentNumber + offSize) > totalNumber)
       forwardOffSize = currentNumber + offSize - totalNumber;
      if ( (currentNumber - offSize) <1) 
       backwardOffSize = offSize - currentNumber + 1 ;
      if ( forwardOffSize == 0  && backwardOffSize == 0) {
       beginNumber =  currentNumber -offSize;
       endNumber = offSize + currentNumber;
      } else if ( forwardOffSize != 0 && backwardOffSize == 0){
       endNumber = totalNumber;
       beginNumber =  currentNumber -offSize -forwardOffSize ;
     } else if ( forwardOffSize == 0 && backwardOffSize != 0){
       beginNumber = 1;
       endNumber =  currentNumber +offSize +backwardOffSize ; 
      } else if ( forwardOffSize != 0 && backwardOffSize != 0){
       beginNumber = 1;
       endNumber = totalNumber;
      }
      if ( beginNumber <= 0)
       beginNumber= 1;
      if ( endNumber >= totalNumber)
       endNumber = totalNumber;
   }

  spaceNode = document.createTextNode("  ");
  navDiv.appendChild(spaceNode); 
  for(var i=beginNumber;i<=endNumber;i++) {
   spaceNode = document.createTextNode(" ");
   navDiv.appendChild(spaceNode);
   if ( i != currentNumber ) {
    var a = document.createElement("a");
    a.style.textDecoration = "none";
    a.setAttribute("currentPage",i);
    a.setAttribute("href","#");
    if(ie){ 
     a.attachEvent("onclick",newNavigateClick(i) );
    }else {
     a.addEventListener("click",newNavigateClick(i),false);
    }
    var txt = document.createTextNode(i);
    a.appendChild(txt);  
    navDiv.appendChild( a ); 
   } else {
    var font = document.createElement("font");
    font.setAttribute("color","red");
    var txt = document.createTextNode(i);
    font.appendChild(txt);
    navDiv.appendChild( font );
   }
      
  }
  
   
  if ( currentNumber < totalNumber) {
   
   spaceNode = document.createTextNode("  ");   
   navDiv.appendChild( spaceNode );
   createNavigateImg("next_page.gif",navDiv,(currentNumber+1));
   
   spaceNode = document.createTextNode("  ");   
   navDiv.appendChild( spaceNode );
   createNavigateImg("end_page.gif",navDiv,totalNumber);
  }
 
  spaceNode = document.createTextNode("  ");
  navDiv.appendChild(spaceNode);
  var gotoInput = document.createElement("input");
  gotoInput.setAttribute("type","text");
  gotoInput.setAttribute("size","1");
  gotoInput.setAttribute("id","gotoTxt");
  
  if(ie){ 
    gotoInput.attachEvent("onkeydown",newCheckValue(event) );
  }else {
    gotoInput.addEventListener(
     "keydown",
     function(event){
       checkValue(event);
     },
    false
   );
  }
  navDiv.appendChild( gotoInput );
  
 }
 
 function checkValue(event){ 
   var e = event || window.event;      
  var gototxt = document.getElementById("gotoTxt"); 
  gototxt.value=gototxt.value.replace(/[^0-9]*$/, ""); 
  var express =/[0-9]/;
  if ( gototxt.value != "" &&  express.test(gototxt.value) ) { 
   if ( e.keyCode == 13) {
     navigateClick(gototxt.value);
   }
  }
 }
 
 var newCheckValue=function(event){
  return function(){
   checkValue(event);
  }
 }
</script>
</head>

<body>
<TABLE width="100%" height="30"   cellSpacing=0 cellPadding=0 border=0 >
                  <TR>
                     <TD align="left">
                      <div id="navigateDiv" style="FONT-SIZE:14; FONT-FAMILY:Verdana">
                          <input name=delete type=button class="btnMouseover" value="删除"; onClick="deleteSearchRecord();" />
                          <input type="hidden" name="hideIdvalue" />
                       </div>
                    </TD>
                  </TR>
</TABLE>
    <br/>
    <input type="button"  οnclick="setNavigative(12,6)" value="display page Number"/>
</body>
</html>


 

pcjavanet
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现前端动态分页码代码实例
10-15
主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
根据当前页码、总页数，设置页码并实现页码切换功能
羽筠的博客
10-13 5797
根据当前页码、总页数，设置页码并实现页码切换功能 AJAX获取列表数据时，前端根据当前页码、总页数设置页码选择元素，前后各显示5个页码，并实现页码切换功能 demo代码： 设置页码 .page_show{ padding: 40px 0; text-align: center;} .page_show span{ display: inline-block; hei
页码部分的js
weixin_33712881的博客
04-08 196
<!--页码部分开始--> <div class="public_ym" style="display:none"> <ul id="upage"> <li id="public_ym_left"><a href="javascript:void(0)" ></a&...
在分页中控制由用户输入页码来跳转的JS函数
sosohotsummer的专栏
07-10 2660
//按页码跳转  function jump(pageCount){  var pageNow=document.getElementById("pageNow").value;  if(pageNow==0){    alert("页数不能是0");     return;    }  var param="0123456789";  for(var i=0;i   {
HTML+JS实现动态获取的内容的翻页显示
HXZz的博客
06-09 1568
整体思路： 先从后台读取要列出的日志的总条数。 把当前的页数和每页显示的数量和某些参数放在GET里进行传递。 根据参数从后台动态抓取内容显示。 根据参数来显示页码导航。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control
javascript分页(页码生成)
penghao122
02-12 163
New Document * { font-size:10.2pt; font-family:tahoma; line-height:150%; } .divContent { border:1px solid red; background-color:#FFD2D3; width:500px; word-break:break-all;...
生成页码（page）
qq_41988113的博客
03-15 874
描述 请补全JavaScript代码，要求根据参数动态生成"li"标签页码并插入"ul"标签下。要求如下： 1. "allItem"为总数据项个数，"pageItem"为每页的数据项个数 2. "li"标签内容为当前页码数，页码从1开始 示例1 输入： _createPage(13,2) 复制输出： "li"长度为7，"li"内容依次为"1","2","3","4","5","6","7" <!DOCTYPE html> <html> <head
EathPaginator:简单的 JavaScript 分页
06-10
**JavaScript 分页组件——EathPaginator** 在网页开发中，数据量大时，为了提高用户体验，通常会采用分页的方式来展示信息。JavaScript 分页是一种常见的前端处理方式，它允许用户在不重新加载整个页面的情况下...
Pagination:使用香草javascript进行分页编码挑战
03-28
分页通常涉及两个关键元素：当前页数和每页显示的项目数量。根据这些信息，我们可以计算出总页数以及在特定页面上应显示的数据范围。 1. **HTML 结构**：创建分页的HTML基础结构，包括导航按钮和当前页数的显示区域...
javascript 支持页码格式的分页类
10-29
`javascript 支持页码格式的分页类` 是一种用于前端页面实现分页显示数据的解决方案。在网页中，当需要展示大量数据，如图片、文章列表等时，一次性加载所有内容可能会导致页面加载缓慢，影响用户体验。分页是一种...
javascript分页代码(当前页码居中)
10-27
昨天看了妙味课堂的 分页视频教程，今天自己参照其思路，自己写了下，并且自己新增了一个显示页码个数的属性 showPageNum
javascript分页代码实例分享(js分页)
10-26
其中，divPager是分页条要显示的容器id，pageIndex是当前页码，pageSize是每页显示的数据数量，totalCount是总数据数量，pageChange是分页变化时的回调函数。 pager函数实现 pager函数的实现主要是通过计算起始页...
JS实现页码选择
fanxingxue的博客
11-10 395
无
Html 分页自动控制、分页自动生成、分页数量可控制
热门推荐
eesc55的博客
08-13 2万+
示例图片： /** * 对页面进行分页 * @param obj 页码标签对象 * @param pageCount number 总页面数 * @param pageSize number 分页大小 * @param currentPage number 当前页 */function PagingManage(obj, pageCount, pageSize, currentPag
javaScript：页码实现
polmJ
12-11 5326
javaScript：页码实现在js页面实现数据分页（假设：每页显示n条数据，当前页码为page）后台响应数据：1、数据总个数 2、page*n~page*n+n条数据显示信息 html：<div class="page"></div>css：.page { float: left; width: 100%; height: 5%; } .page ul{
js页码功能
qq_39041201的博客
09-21 626
Document </div> <!-- <script src="./vue.js"></script> --> <script> var json = { title : [ '效果1', '效果2', ...
分页方法js+html
m0_58780961的博客
11-29 559
HTML方法 <div v-show="isShow" > </br> <div id="div1" name="div1"></div> <div id="barcon" name="barcon"></div> <div id="pagination" style="margin-top: 10px;height: 35px;"..
纯JS详解如何动态生成分页 (非封装版)
elephant230的博客
04-01 998
想加深JS功力的伙伴们,都逃不过分页按钮这个环节. 今天就用纯JS代码展示一下分页怎么写,希望能帮助到每个有志于编程学习的朋友. 上图是分页实例的大致效果图. (2019年最详版代码加注释,非封装代码,破解你的所有疑问,我想再没有这么详细的注释了吧
动态改变Ext store的参数
莫理琴的专栏
08-03 5566
var itemsPerPage = 20 ; var store =new Ext.data.Store({             pageSize: itemsPerPage,             fields : [              'yourfield1',              'yourfield2',             ],
javascript实现表格分页
最新发布
09-03
Javascript可以通过以下步骤实现表格分页： 1. 首先，需要根据数据的总数和每页显示的行数计算出总页数。可以使用`Math.ceil()`函数将数据总数除以每页显示的行数，并向上取整。 2. 然后，需要定义一个函数来生成表格的分页导航。这个函数可以接受当前页码和总页数作为参数，并根据这些信息生成页码链接。可以使用循环语句或者`document.createElement()`函数来动态生成页码链接，并将它们添加到页面上适当的位置。 3. 接着，需要定义一个函数来根据当前页码显示相应的表格内容。可以根据当前页码和每页显示的行数来计算出要显示的数据的起始索引和结束索引，然后通过相应的DOM操作将选定的数据行显示在表格中。 4. 最后，需要给每个生成的页码链接添加点击事件监听器，当点击某个页码链接时，会调用前面定义的函数来显示相应的表格内容。 总结起来，javascript实现表格分页的关键步骤包括计算总页数、生成分页导航、根据当前页码显示表格内容和处理页码链接的点击事件。通过这些步骤，可以实现一个简单的表格分页功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值