JS实现的简单分页功能示例

2024-11-27 01:13:30

本文实例讲述了JS实现的简单分页功能。分享给大家供大家参考，具体如下：

HTML部分：

<body onLoad="goPage(1,10);">
  <table id="idData" width="70%">
    <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  </table>
  <table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
  </table>

js部分：

/**
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 **/
function goPage(pno,psize){
  var itable = document.getElementById("idData");
  var num = itable.rows.length;//表格所有行数(所有记录数)
  console.log(num);
  var totalPage = 0;//总页数
  var pageSize = psize;//每页显示行数
  //总共分几页
  if(num/pageSize > parseInt(num/pageSize)){
      totalPage=parseInt(num/pageSize)+1;
    }else{
      totalPage=parseInt(num/pageSize);
    }
  var currentPage = pno;//当前页数
  var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
    var endRow = currentPage * pageSize;//结束显示的行  40
    endRow = (endRow > num)? num : endRow;  //40
    console.log(endRow);
    //遍历显示数据实现分页
  for(var i=1;i<(num+1);i++){
    var irow = itable.rows[i-1];
    if(i>=startRow && i<=endRow){
      irow.style.display = "block";
    }else{
      irow.style.display = "none";
    }
  }
  var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
  if(currentPage>1){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
  }else{
    tempStr += "首页";
    tempStr += "<上一页";
  }
  if(currentPage<totalPage){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
  }else{
    tempStr += "下一页>";
    tempStr += "尾页";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}

完整测试示例：

<!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>www.jb51.net JS分页</title>
<script>
/**
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 **/
function goPage(pno,psize){
  var itable = document.getElementById("idData");
  var num = itable.rows.length;//表格所有行数(所有记录数)
  console.log(num);
  var totalPage = 0;//总页数
  var pageSize = psize;//每页显示行数
  //总共分几页
  if(num/pageSize > parseInt(num/pageSize)){
      totalPage=parseInt(num/pageSize)+1;
    }else{
      totalPage=parseInt(num/pageSize);
    }
  var currentPage = pno;//当前页数
  var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
    var endRow = currentPage * pageSize;//结束显示的行  40
    endRow = (endRow > num)? num : endRow;  //40
    console.log(endRow);
    //遍历显示数据实现分页
  for(var i=1;i<(num+1);i++){
    var irow = itable.rows[i-1];
    if(i>=startRow && i<=endRow){
      irow.style.display = "block";
    }else{
      irow.style.display = "none";
    }
  }
  var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
  if(currentPage>1){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
  }else{
    tempStr += "首页";
    tempStr += "<上一页";
  }
  if(currentPage<totalPage){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
  }else{
    tempStr += "下一页>";
    tempStr += "尾页";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}
</script>
</head>
<body onLoad="goPage(1,10);">
  <table id="idData" width="70%">
    <tr><td>user1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user8</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user9</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user10</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user11</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user12</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user13</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user14</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user15</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user16</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user17</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user18</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user19</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user20</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user21</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user22</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user23</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user24</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user25</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user26</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user27</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user28</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user29</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
    <tr><td>user30</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
  </table>
  <table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
  </table>
</body>
</html>

运行效果图：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Vue.js结合bootstrap前端实现分页和排序效果

写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 排
js实现简单分页导航栏效果

本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageSize (自己设置) 总页数: totalPageNum (根据上面的参数计算) 当前页: currentPageNum (前台传入) 当前页要显示的内容 : List<PageInfo> (查数据库: pageSize和currentPageNum每页的计算起始记录索引 2. 在html页面
基于vue.js实现分页查询功能

利用vue.js实现数据库分页,供大家参考,具体内容如下最新项目有一个分页功能,画面风格很简朴给的样图就用[1]表示页码了, 因此,我没有上网上找插件,自己简单的做了一个.作为菜鸟,代码可能有点青涩,请见谅. 除了vue我还引用了Bootstrap的类和图标 html <div class="paging"> <ul class="pagination" style="margin: 13px"> <li clas
vue.js 2.0实现简单分页效果

本文实例为大家分享了vue.js 2.0实现分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>vue.js 2.0 实现的简单分页</title> <style> * { margin: 0; padding: 0; box-sizing: border-box } html { fo
js简单的分页器插件代码实例

这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下自己引入jquery插件,我的demo是引入的自己本地的query 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/
基于vue.js实现的分页

本文主要介绍基于vue的分页原生写法. 先po上效果图: html部分,将page作为一个单独的组件 <script type="text/x-template" id="page"> <ul class="pagination"> <li v-show="current != 1" @click="current-- && goto(current)">
vue+vuex+json-seiver实现数据展示+分页功能

一丶项目分析 1.UI: 2.接口信息: 二丶项目环境 Mockjs:生成模拟数据(含中文名,以及地址) json-server:模拟后端接口 webpack-dev-server:开启服务器环境+接口代理 jquery:使用jquery的ajax拉取数据 vue+vuex:vuex负责数据交互,vue渲染页面 iviewui:ui组件,方便布局搭建开发环境 1.基本环境 Vue起步(无cli) 安装: npm install --save Mockjs 使用: 详细API:mockjs.co
JS 使用 window对象的print方法实现分页打印功能

最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo
JS实现的简单分页功能示例

本文实例讲述了JS实现的简单分页功能.分享给大家供大家参考,具体如下: HTML部分: <body onLoad="goPage(1,10);"> <table id="idData" width="70%"> <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td>&
Django框架实现的简单分页功能示例

本文实例讲述了Django框架实现的简单分页功能.分享给大家供大家参考,具体如下: 前面一篇<Django开发的简易留言板>写了个简单的留言板,如果数据量太多的话在一页显示就不那么友好了,本文就是做一个分页显示. 代码在上一篇的基础上修改. 导入分页模块并修改views #只需修改index函数即可 from django.core.paginator import Paginator def index(request): messages = models.Message.objects.
JavaScript前端实现小说分页功能示例

目录先让我找找我的思路在哪里思路已至,码来! 结束先让我找找我的思路在哪里在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢? 因为没有什么思路,那就只能在前辈的项目中寻找思路了. 这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,串台了好了,然后在找一本有缘书,跟我一同前往那神秘的未知世界. 就决定是你了,开始免费试读. 然后我们就可以发现起点是如何实现这个功能的了,原来是使用columns这个属性来让文章自动分页的昂. 我们现在就去搜
通过 Django Pagination 实现简单分页功能

作者:HelloGitHub-追梦人物文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面,影响用户体验. Django 内置的 Pagination 能够帮助我们实现简单的分页功能,在上一篇教程中我们使用脚本批量生成了几百篇博客文章,正好用于测试分页效果. Paginator 类的常用方法分页功能由 Django 内置的 Paginator 类提供,这个类位于 django.core.
JS处理数据实现分页功能

这几天有小伙伴讨论起了分页的相关问题,这里我也简单讲下前端如何简单便捷的利用Js(库)写出优雅,好用的分页工具. 分页是个很简单又超多接触的技术点,粗略来讲分如下两种: 真分页——每次根据页码.页大小获取数据并展示. 假分页——一次性获取所有数据,根据页码.页大小展示. 公认比较好的做法是真分页,这样可以避免很多问题(如内存占用过多). 有一点需要注意,单纯的前端是无法独立完成数据分页的(废话),所以后端支持是必须的. 作为支持,webapi除了返回所请求的数据,还应返回数据总量以便计算页数:
Django实现简单分页功能的方法详解

本文实例讲述了Django实现简单分页功能的方法.分享给大家供大家参考,具体如下: 使用django的第三方模块django-pure-pagination 安装模块: pip install django-pure-pagination 将'pure_pagination'添加到settings.py文件中 INSTALLED_APPS = ( ... 'pure_pagination', ) 在view.py文件中 from django.shortcuts import render ro
Vue+element-ui 实现表格的分页功能示例

本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum
DataGridView使用自定义控件实现简单分页功能(推荐)

本例子使用自定义控件方法实现,数据库使用的是SQL Server,实现过程如下: 1.新建一个自定义控件,命名为:PageControl. 2.PageControl代码如下: public partial class PageControl : UserControl { //委托及事件 public delegate void BindPage(int pageSize, int pageIndex, out int totalCount); public event BindPage Bi
DataGridView使用BindingNavigator实现简单分页功能

上篇文章给大家介绍DataGridView使用自定义控件实现简单分页功能,本篇使用BindingNavigator来实现简单分页功能.其实也只是借用了一个BindingNavigator空壳, 实现原理和代码与上一篇几乎一样,实现方法如下: 1.新建一个WinForm程序,命名为BindingNavigatorMain,并拖入一个DataGridView控件及一个BindingNavigator控件.在BindingNavigator右下角弹窗中添加一个Button(转到),BindingNa
Vue后台管理系统之实现分页功能示例

本文主要介绍了Vue后台管理系统之实现分页功能,分享给大家,具体如下: 效果图: 功能描述: 显示数据的总数目可选择每天的显示条数点击页码跳转到指定页数输入页码可跳转到指定页 1.功能实现 1.1 结构  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="quer

JS实现的简单分页功能示例

相关推荐

随机推荐