js 实现分页

最新推荐文章于 2025-05-15 10:36:54 发布
最新推荐文章于 2025-05-15 10:36:54 发布
阅读量426 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tiantangpw/article/details/38664265
本文详细介绍了如何在网页中实现分页与跳转功能，包括前端交互设计、参数传递、页面导航等关键步骤，确保用户能够方便地浏览大量数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<%@ page contentType="text/html;charset=GBK"%>
<%@ page import="com.paipai.boss.market.constant.BooleanValue"%>
<%@ include file="../common.jsp"%>
<input type="hidden" name="fromPageNum" value="0">
<input type="hidden" name="rowCount" value="15">
<input type="hidden" name="isFromPagination" value="<%=BooleanValue.FALSE%>">

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td height="22" width="20%" background="images/boss_content_12.gif" align="left" class="txgy14">&nbsp;&nbsp;&nbsp;&nbsp;查询结果</td>
<td width="70%" background="images/boss_content_12.gif" align="right">
    <a id="aFirst" onClick="first(this)" style="cursor:hand">
    <font color="#0000CC">首页</font></a>&nbsp;|&nbsp;
 <a id="aPrevious" onClick="previous(this)" style="cursor:hand">
 <font color="#0000CC">上一页</font></a>&nbsp;|&nbsp;
 <a id="aNext" onClick="next(this)" style="cursor:hand"> 
 <font color="#0000CC">下一页</font></a>&nbsp;|&nbsp;
 <a id="aLast" onClick="last(this)" style="cursor:hand">
 <font color="#0000CC">尾页</font></a>&nbsp;|&nbsp;
 第<label id="lbCurPage"></label>/<label id="lbPageNum"></label>页&nbsp;|&nbsp;
 共<label id="lbRowNum"></label>条&nbsp;|&nbsp;
 每页 <input type="text" style="height:18" size="3" maxlength="3" name="rowNumPerPage" id="rowNumPerPage" value="15" onKeyDown="beforeDoRow()" > 条
    <input type="button" class="button" style="height:18"  value="go" onclick="doRow()"/> &nbsp;|&nbsp;
  转到第
<input type="text" style="height:18" size="3"  id="pageNO" onKeyDown="beforeDoRow1()">页<input type="button" class="button" style="height:18" value="go" onclick="doJump()">
</td>
<td background="images/boss_content_12.gif" width="10%">&nbsp;</td>  
</tr>
</table>
<script language="javascript">
    var displayRowNum = 15;
 var curPage = 1;
 var fromPageNum = 0;
 var rowCount = 1;
 var lastPage = 1;
 var rowNum = 0;
 var fromPagination = false;
 var firstTime = 0;
 
 function initPagination()
 {   
    //首次不要检验
    if(firstTime > 0)
    {
   var rowAmount = Trim(frmMain.rowNumPerPage.value);
   if(rowAmount==null || rowAmount.length==0)
   {
    alert("请输入数字");
    frmMain.rowNumPerPage.focus();
    return false;
   }
   if(isRowAmount(rowAmount)==false)
   {
    alert("输入的条数不合法，请重新输入");
    frmMain.rowNumPerPage.focus();
    return false;
   }
   if(parseInt(frmMain.rowNumPerPage.value) <= 0)
   {
    alert("数字必须大于零");
    frmMain.rowNumPerPage.focus();
    return false;
   }
   displayRowNum = frmMain.rowNumPerPage.value;
  }
  showSending();
  curPage = 1;
  fromPageNum = 0;   
  firstTime++;
  rowCount = displayRowNum; 
  frmMain.fromPageNum.value = fromPageNum;
  frmMain.rowCount.value = rowCount;  
  frmMain.rowNumPerPage.value = displayRowNum;  
  return true;
 } 
 
 function first(object)
 { 
     if(!object.disabled)
  {
   if(curPage == 1)
   {
       alert("已经是第一页");
    return;
   }
   curPage = 1;
   setPagination();
   pagination();  
        }
 }
 function previous(object)
 {
     if(!object.disabled)
  {
   if(curPage == 1)
   {
    alert("已经是第一页");
    return;
   }  
   curPage--;
   setPagination();
   pagination();
  }
 }
 function next(object)
 {
     if(!object.disabled)
  {
   if(curPage == lastPage)
   {
    alert("已经是最后一页");
    return;
   }
   curPage++;
   setPagination();
   pagination();
        }
        //curPage++;
 }
 function last(object)
 {
     if(!object.disabled)
  {
   if(curPage == lastPage)
   {
       alert("已经是最后一页");
    return;
   }
   curPage = lastPage;
   setPagination();
   pagination();
  }
 }
 
 function setPagination()
 {
     if(curPage >1)
  {
   aPrevious.disabled = false;
   aFirst.disabled = false;
  }
  else
  {
   aPrevious.disabled = true;
   aFirst.disabled = true;
  }
  
  if(curPage<lastPage)
  {
      aNext.disabled = false;
      aLast.disabled = false;
  }
  else
  {
      aNext.disabled = true;
      aLast.disabled = true;
  }
  document.all.lbCurPage.innerHTML=curPage;
  document.all.lbPageNum.innerHTML=lastPage;
  document.all.lbRowNum.innerHTML=rowNum;    
  
 }
 function beforeDoRow()
 {
  var keycode = event.keyCode; 
  if (keycode == 13)
  {
      doRow();
  }
 }
 function beforeDoRow1()
 {
  var keycode = event.keyCode; 
  if (keycode == 13)
  {
      doJump();
  }
 }
 function doRow()
 {
     //fromPagination = true;为了屏蔽frmMain的submit按钮
     if(isEmpty())
  {
           fromPagination = true;
    event.cancelBubble = true;   
             event.returnValue=false;
       return; 
   }
      var rowAmount = Trim(frmMain.rowNumPerPage.value);
  if(rowAmount==null || rowAmount.length==0)
  {
   alert("请输入数字");
   fromPagination = true;
   frmMain.rowNumPerPage.focus();
   event.cancelBubble = true;   
            event.returnValue=false;
   return;
  }
  if(isRowAmount(rowAmount)==false)
  {
   alert("输入的条数不合法，请重新输入");
   fromPagination = true;
   frmMain.rowNumPerPage.focus();
   event.cancelBubble = true;   
            event.returnValue=false;
   return;
  }
  if(parseInt(frmMain.rowNumPerPage.value) <= 0)
  {
   alert("数字必须大于零");
   fromPagination = true;
   frmMain.rowNumPerPage.focus();
   event.cancelBubble = true;   
            event.returnValue=false;
   return;
  }
  if(parseInt(frmMain.rowNumPerPage.value)>50)
  {
   alert("每页最多可以显示50条");
   fromPagination = true;
   frmMain.rowNumPerPage.focus();
   event.cancelBubble = true;   
            event.returnValue=false;
   return;
  }
     displayRowNum = frmMain.rowNumPerPage.value; 
  updatePageNum(); 
  setPagination();
  pagination();
 }
 function doJump()
 {
  frmMain.pageNO.value = Trim(frmMain.pageNO.value); 
  var rowAmount = frmMain.pageNO.value;
  if(rowAmount == "" || rowAmount == "0")
  {
   alert("没有输入页数，请输入");
   frmMain.pageNO.focus();
   event.cancelBubble = true;   
            event.returnValue=false;
   return;
  }
  if(isRowAmount(rowAmount)==false)
  {
   alert("输入的页数不合法，请重新输入");
   frmMain.pageNO.focus();
   event.cancelBubble = true;   
            event.returnValue=false;
   return;
  }
        //把焦点转移，这样用户就不会因为滚动鼠标中键而再分页
  frmMain.rowNumPerPage.focus();
     curPage = frmMain.pageNO.value;
  setPagination();
  pagination();
 }
 function pagination()
 {
     fromPageNum = (curPage-1)*displayRowNum;  
  if((fromPageNum+1) > rowNum)
  {
   alert("输入数字过大，当前页没有可显示的记录！");
   fromPagination = true;
   frmMain.rowNumPerPage.focus();
   return;
  }  
     showSending();
  rowCount = displayRowNum; 
  frmMain.fromPageNum.value = fromPageNum;
  frmMain.rowCount.value = rowCount;
  frmMain.isFromPagination.value = "<%=BooleanValue.TRUE%>";
  frmMain.submit();
 } 
 
 function updatePaginationInfo(newRowNum)
 {
     frmMain.isFromPagination.value = "<%=BooleanValue.FALSE%>";
  rowNum = newRowNum;//"<s:property value="rowCount"/>";
  curPage = 1;
     lastPage = Math.ceil(rowNum/displayRowNum);   
  if(lastPage*displayRowNum < rowNum)
  {
   lastPage++; 
  }  
  updatePageNum();
  setPagination();
 }
 
 function updatePageNum()
 {
     lastPage = Math.ceil(rowNum/displayRowNum);
  if(lastPage*displayRowNum < rowNum)
  {
   lastPage++; 
  }  
  //更新条数
  document.all.lbPageNum.innerHTML=lastPage;  
 }
 /**
* 校验输入的条数是否合法
*
*/
function isRowAmount( d_int)
{
 var checkOK = "0123456789";
 var checkStr = d_int;
 var allValid = true;
 var decPoints = 0;
 var ch;
 for (var i = 0;  i < checkStr.length;  i++)
 {
  ch = checkStr.charAt(i);
  for (var j = 0;  j < checkOK.length;  j++)
  {
   if (ch == checkOK.charAt(j))
   {
    break;
   }
  }
  if (j == checkOK.length)
  {
   allValid = false;
   break;
  }
 }
 return (allValid);
}
function isEmpty()
{
 if (rowNum == 0)
 {
  alert("没有记录");
  return true;
 }
 return false;
}
</script>

著名特乐
关注
前端实战：Javascript 实现分页效果
AI架构全栈开发实战笔记
05-07 762
在前端开发中，当我们需要展示大量数据时，一次性将所有数据呈现给用户会导致页面加载缓慢，用户体验不佳。分页效果能够将数据分成多个页面，用户可以根据需要切换页面查看数据，有效提升了页面的加载速度和用户体验。本文的目的是详细介绍如何使用 Javascript 实现分页效果，范围涵盖从基础概念的讲解到实际项目的开发，以及相关技术的拓展。本文将首先介绍分页效果的核心概念和相关联系，包括分页的基本原理和架构。接着详细讲解实现分页效果的核心算法原理和具体操作步骤，并结合 Python 代码进行阐述。
html分页器的实现原理,js分页器详解
weixin_31281613的博客
05-31 1002
本文主要和大家分享js分页器详解，我们先来看一下效果，希望能帮助到大家。依赖于：bootstrap 和 jqueryhtml代码：通过class="pj_pager"引用，pj_total初始化总条数js代码：/*** 分页器，依赖于bootstrap,jquery*/var pager = {init : function(r) {this.obj = $(".pj_pager");this.t...
jQuery+AJAX实现纯js分页功能
热门推荐
whan8080的专栏
03-21 1万+
使用jQuery的AJAX技术，在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架，效果个人还是觉得很不错的。这次只是拿来作为网页元素的css样式表使用，比较省力，效果也会比自己做要漂亮多了。 使用数据为单独的json文件data.json [ { "name": "bootstrap-table", ...
纯js实现分页
weixin_34284188的博客
01-13 263
原理：所有数据已加载好，js通过遍历部分显示，实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <script type="text/javascript" src="page.js"></script> <style type="text/css...
JavaScript分页技术：10个实用代码案例解析
最新发布
weixin_32747681的博客
05-15 869
在Web开发中，良好的用户体验往往离不开精美的界面设计和流畅的交互体验。分页控件作为用户浏览大量数据时的界面组件，其样式和交互的自定义显得尤为重要。
浅谈js分页的几种方法
sxs161028的博客
07-06 1434
一个项目中必然会遇到分页这种需求的，分页可以使数据加载更合理，也让页面显示更美观，更有层次感！那么js分页到底如何实现呢？下面我就来讲一下三种循序渐进的方法1.自己纯手写分页更深入的去理解分页的意义如分页的原理，其实，尝试自己去写一些分页方法是再合适不过的了，可以封装成一个分页方法，但是呢，这里呢，我就写一下最简单的指定的分页方法 ，就不去封装了。就以下图为例：上图是个非常普通的分页。第一个文本框可
使用JS实现纯分页原理以及实现
廖子默
10-13 3187
写在前面 好久没写博客了，因为实习工作好忙，还要同时兼顾毕业设计，最主要的是我现在是前端实习，哈哈，我一个在大学学了这么久后端开发的人，结果人生第一份正式的实习工作是前端。现在做了一个月了，自学了很多的前端知识，也对前端有了更多的了解，发现以前的认知都是错误的，什么前端简单，谁再说这句话我会认为他是一个ZZ。还有最后就是其实作为一个软件开发的人，技术栈一定要广，然后才深入几个。 不说废话了—实...
前端 常见网页中分页的原理 js实现
qq_48046110的博客
09-01 459
js代码 其中productList是自己定义的数据 filter是过滤 把符合条件的组合数组过滤出来 var currentPage = 1;//当前页码 var number = 5 //每一页的商品数量 var totalPage = Math.ceil(productList.length / number)//总页数 function getPhone(page,callback){ var currentPageProduc
利用js制作html table分页示例(js实现分页)
10-26
描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的...
JS实现分页效果代码.zip
07-04
本资源“JS实现分页效果代码.zip”提供了一种用JavaScript实现分页功能的解决方案，特别适用于动态加载数据或者需要优化用户浏览体验的场合。以下是对这个压缩包中包含的两个文件及其相关知识点的详细解释。 1. **...
JS实现分页导航效果
11-21
通过JS自己简单实现了效果。下面和大家分享一下。 内容 下图为首次加载后的效果，默认显示5页， 当点击下一页时将选中页面的页码置于中间 下面让我们来看看实现的代码 第一部分是在页面显示内容的处理 function ...
使用js实现简单分页
05-27
使用js写的分页模块，html页面引入相应的js和css可以直接调用里面的方法，使用方便，里面有一个小demo
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 8144
纯js 分页功能。
JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）
编程界明世隐的博客
12-17 2559
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; padding:0; } .table { word-break: br...
js如何实现分页功能
qq_60504665的博客
09-23 1316
6. 点击分页按钮更新数据：当用户点击分页按钮时，根据按钮对应的页码更新当前页码，并重新显示当前页的数据。4. 显示当前页的数据：根据当前页码和每页显示的数量，从数据数组或对象中提取对应页码的数据。5. 生成分页按钮：根据总页数，生成相应数量的分页按钮，并为每个按钮绑定点击事件。2. 设置每页显示的数量和当前页码：确定每页要显示的数据数量，以及当前页码。3. 计算总页数：根据数据的总数和每页显示的数量，计算出总页数。或本地获取数据，并将数据存储在一个数组或对象中。以上就是实现分页的办法了。
JavaScript分页功能如何实现
xiaojie513的博客
05-11 1438
函数用于显示分页链接。具体实现可以根据具体需求进行调整。函数用于从数据源中获取当前页显示的数据，函数用于显示当前页的数据，
【js】js实现分页01
qq_36557846的博客
09-01 1284
js实现分页
JavaScript实现列表分页（小白版）
分享Java，vue学学习笔记
03-26 2740
上方获li获取标签为8；这里是一个页面显示5条数据所以对pageLi进行取模；为0则是Math.floor不是则是Math.ceil，Math.floor是向下取整（ 1.6 => 1），Math.ceil为向上取整（1.6=>2 ），所以这里n最后等于2，页面为2。第一步：修改一下样式（一条li标签假如有40的高度，现在有8个则整个ul有320；我现在需要进行一个页面显示5条数据；第四步：对分页两个li做点击事件进行分页显示。在获取分页li进行样式设置。以ul列表为例进行分页。第三步：创建分页标签。
JavaScript实现分页功能代码示例
本资源提供的是一段纯JavaScript实现的分页代码，它不依赖任何外部库，适合在轻量级项目中使用。 1. **分页参数设置** - `PageSize`：定义每页显示的字数，例如这里是5000字。 - `flag`：分页模式选择，值为1表示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值