js实现分页（假分页）

最新推荐文章于 2021-08-02 21:26:35 发布
最新推荐文章于 2021-08-02 21:26:35 发布
阅读量766 收藏
点赞数
文章标签： javascript 前端 java ViewUI
原文链接：http://www.cnblogs.com/fairy-tale-jm/p/7839329.html
版权
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table align="center" border="1" width="60%">
<tbody id="table2">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>6</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>8</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>9</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>10</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>11</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>6</td>
</tr>
<tr>
<td>12</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>13</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>14</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>15</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>16</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>17</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>18</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>19</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>20</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>21</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>22</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>6</td>
</tr>
</tbody>
</table>
<h3 align="center">
<span id="spanFirst">first</span>
<span id="spanPre">previous</span>
<span id="spanNext">next</span>
<span id="spanLast">last</span>
<span id="spanPageNum"></span> /
<span id="spanTotalPage"></span>
</h3>
</body>
<script>
var theTable = document.getElementById("table2");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var numberRowsInTable = theTable.rows.length;
var pageSize = 5;
var page = 1;
//下一页
function next() {
hideTable();
currentRow = pageSize * page;
maxRow = currentRow + pageSize;
if (maxRow > numberRowsInTable)
maxRow = numberRowsInTable;
for (var i = currentRow; i < maxRow; i++) {
theTable.rows[i].style.display = '';
}
page++;
if (maxRow == numberRowsInTable) {
nextText();
lastText();
}
showPage();
preLink();
firstLink();
}
//上一页
function pre() {
hideTable();
page--;
currentRow = pageSize * page;
maxRow = currentRow - pageSize;
if (currentRow > numberRowsInTable)
currentRow = numberRowsInTable;
for (var i = maxRow; i < currentRow; i++) {
theTable.rows[i].style.display = '';
}
if (maxRow == 0) {
preText();
firstText();
}
showPage();
nextLink();
lastLink();
}
//第一页
function first() {
hideTable();
page = 1;
for (var i = 0; i < pageSize; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preText();
nextLink();
lastLink();
}
//最后一页
function last() {
hideTable();
page = pageCount();
currentRow = pageSize * (page - 1);
for (var i = currentRow; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = '';
}
showPage();
preLink();
nextText();
firstLink();
}
function hideTable() {
for (var i = 0; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
}
function showPage() {
pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
var count = 0;
if (numberRowsInTable % pageSize != 0)
count = 1;
return parseInt(numberRowsInTable / pageSize) + count;
}
 
function preLink() {
spanPre.innerHTML = "<a href='javascript:pre();'>previous</a>";
}
function preText() {
spanPre.innerHTML = "previous";
}
function nextLink() {
spanNext.innerHTML = "<a href='javascript:next();'>next</a>";
}
function nextText() {
spanNext.innerHTML = "next";
}
function firstLink() {
spanFirst.innerHTML = "<a href='javascript:first();'>first</a>";
}
function firstText() {
spanFirst.innerHTML = "first";
}
function lastLink() {
spanLast.innerHTML = "<a href='javascript:last();'>last</a>";
}
function lastText() {
spanLast.innerHTML = "last";
}
function hide() {
for (var i = pageSize; i < numberRowsInTable; i++) {
theTable.rows[i].style.display = 'none';
}
totalPage.innerHTML = pageCount();
pageNum.innerHTML = '1';
nextLink();
lastLink();
}
hide();
</script>
 
</html>
 

转载于:https://www.cnblogs.com/fairy-tale-jm/p/7839329.html

weixin_30430169
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的...
纯JS前端实现分页代码
11-25
因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！...
原生JS完成假分页
Coder Yasmine
09-04 2998
最近这个项目页面要用Bootstrap，但是目前浏览器对BootStrap支持度还不够，所以就需要自己写分页，不过好在有分页的基本原理，还是简单的，下面记录一下代码。 先看一下分页的效果：          从分页的原理来看，首先需要几个变量，分别是总条数、总页数、当前页数和每页显示多少条。因为是假分页，所以还需要传入查询得到的数据集。然后就是给每个超链接添加方法，计算该
js做表格假分页
Raken12的博客
05-06 286
若非不得已，不建议前端做假分页，下面开始代码吧 <el-table :data='TectableData.slice((currentPageG-1)*pagesizeG,currentPageG*pagesizeG)'> </el-table> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-pag
浅谈js分页的几种方法
dieyu2828的博客
03-21 412
Web 前端中常用的分页技术主要是两种技术：一种是jsp的分页技术，其读取数据分批次读取，操作页数跳转的时候才加载相应页面的数据；另一种js分页技术是一次性全部加载数据，然后利用js对页面进行数据显示与否分页面操作，是种假的分页技术。js 分页技术比较常用，下面重点介绍 js 的3种分页技术。 一个项目中必然会遇到分页这种需求的，分页可以使数据加载更合理，也让页面显示更美观，更有层次感...
假分页--js
wind_linjie的博客
08-02 213
移动端： //上拉加载 let a = [1,2,3,2,3,4,4,3,3,3,3,3,3,3,2,2,33,34,3,4]; let b = []; function fn(){ if(a.length>10){ b = b.concat(a.splice(0,10)); }else{ b = b.concat(a); a = [] } console.log(b
javascript 数组假（模拟）分页效果（浅显易懂）
weixin_48914823的博客
05-15 462
// 假分页效果 (多用于商品评论的格式处理) // arr 为 后端传给我们的数组 num 为 每页展示的条数 function page(arr, num) { // 新建数组，用于储存新数组 var arrNew = [] // 如果单页的数组长度大于传入数组长度，则证明一个页面就可以展示 if (arr.length <= num) { arrNew.push(arr) } else { // 下面这部分的操作是将 [1,2],[3.4]存入a.
JS实现分页导航效果
11-21
通过JS自己简单实现了效果。下面和大家分享一下。 内容 下图为首次加载后的效果，默认显示5页， 当点击下一页时将选中页面的页码置于中间 下面让我们来看看实现的代码 第一部分是在页面显示内容的处理 function ...
原生js + css实现分页
11-22
原生js+css分页
原生javascript实现分页效果
10-19
主要为大家详细介绍了原生javascript实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JQuery实现的前台假分页
10-16
JQuery实现的前台数据分页显示，该分页为假分页，是一次性传入在前台需要展示的数据，然后进行分页显示。不是在后台对数据进行分页获取。
js真假分页示例
11-06
利用jQuery拓展的分页插件，无刷新分页，资源包中有示例
页面列表实现假分页
08-30
框架使用Struts2+Hibernate实现页面列表的假分页
jquery.pagination.js实现分页的三种形式，实例
11-17
这个是使用jquery.pagination.js实现分页的三种实例，包括使用jquery.pagination.js实现简单的分页，使用ajax实现无刷新分页，还有设置分页属性就行分页。。。
js jquery实现table假分页
08-09
NULL 博文链接：https://shareisattitude.iteye.com/blog/2189298
一款极度偷懒的假分页js代码（只适用于要求很低的页面）
qq_40111437的博客
10-31 299
首先声明，此分页及其偷懒，而且只适用于页数较少，且数据固定的表格，当然，你硬是要用在变化的数据表格中也没问题，前提是你需要自己修改代码哦！！！ 实际场景，大家都知道分页的总页数一般是后台传出来的，但是本人碰到了不能大量更改后台代码的情况，但数据又过多，大概50多条，需要分页，所以，本人思索之下，得出一个结论，那就是做个死的假分页，不多说，先展示一下效果。 ···················
前端假分页js一个函数搞定
白白的博客
12-19 827
pageTotal数组长度 // pageSize每页显示 10 条 this.pageNum第几页 paginationChange分页函数，所有数据在list中，pageData是分页数组，currentPageData是页面展示数据pageData[this.pageNum-1] 分页函数和改变页数和size函数 更新数据和改变size时调用分页函数，改变页数时只改变当前页面数据值 // 分页查询 // pageTotal数组长度 // pageSize每页显示 10 条 pa.
假分页的前端实现（html+bootstrap+js）
HYeeee的博客
04-28 3485
一、开始 今天弄了一天的分页，总结一下今天的工作。 找了一下真假分页的区别： 所谓的“真分页”与“假分页”，前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。 而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。 “真分页”显然是效率更高，面对庞大的数据量也能够从...
基于jquery.pagination.js前端实现分页功能（假分页）
weixin_39407291的博客
03-20 1207
今天在项目中遇到后台把数据全部返回未作分页处理的情况，遂研究了一下纯前端实现分页功能的方法，项目已引入插件jquery.pagination.js，插件功能文章中不再赘述，有兴趣可阅读博客： https://www.cnblogs.com/aiiright/p/6734384.html https://blog.csdn.net/m0_38082783/article/details/737372...
js实现分页
最新发布
05-31
在JS中实现分页，可以通过以下步骤来实现： 1. 定义每页显示的数据数量（pageSize）以及当前页码（currentPage）。 2. 将数据按照每页的数量进行分割，得到分页后的数据。 3. 根据当前页码，从分页后的数据中获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值