关于一个分页功能，没有思路了，想请教。

Web 开发 > JavaScript [问题点数：60分，结帖人mycggo]

参考网上代码实现一个基本的分页功能，没有完全实现，没有更好的思路了，在这里请教大家。
1：目前显示所有页数，应该一次只显示[1,2,3,4,5] [6,7,8,9,10] [11,12,13,14,15] 这样的分页；
2：JS 哪些部分该改进？

谢谢！
下面是全部代码

XML/HTML code?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Go Coding!</title>

<style>

* {

margin: 0;

padding: 0;

border: none;

list-style: none;

text-decoration: none;

font-size: 12px;

}

body {

padding: 20px;

}

.title {

font-size: 16px;

color: #f80;

}

.list>li {

padding: 6px;

border-bottom: 1px solid #eee;

}

.pagination {

padding: 4px;

}

.pagination a {

display: inline-block;

padding: 4px;

margin: 0 4px 0 0;

color: #00c;

}

</style>

</head>

<body>

<ul class="list"></ul>

<section class="pagination"></section>

<script>

let data = {

"list": [

{ "id": 1, "title": 2001 },

{ "id": 2, "title": 2002 },

{ "id": 3, "title": 2003 },

{ "id": 4, "title": 2004 },

{ "id": 5, "title": 2005 },

{ "id": 6, "title": 2006 },

{ "id": 7, "title": 2007 },

{ "id": 8, "title": 2008 },

{ "id": 9, "title": 2009 },

{ "id": 10, "title": 2010 },

{ "id": 11, "title": 2011 },

{ "id": 12, "title": 2012 },

{ "id": 13, "title": 2013 },

{ "id": 14, "title": 2014 },

{ "id": 15, "title": 2015 },

{ "id": 16, "title": 2016 },

]

}

let list = data.list;

console.log(`list-length: ${list.length}`);

pagination({

"current-page": 1,

"page-size": 5,

});

function pagination(par) {

let listBox = document.querySelector(".list");

let num = data.list.length;

let totalPage = 0;

let pageSize = par["page-size"];

let currentPage = par["current-page"];

if (num / pageSize > parseInt(num / pageSize)) {

totalPage = parseInt(num / pageSize) + 1;

} else {

totalPage = parseInt(num / pageSize);

}

let sliceStart = (currentPage - 1) * pageSize;

let sliceEnd = currentPage * pageSize;

sliceEnd = sliceEnd > num ? num : sliceEnd;

let dataSlice = data.list.slice(sliceStart, sliceEnd);

let listText = "";

for (let item of dataSlice) {

listText += `

<li><h5 class="title">${item.id} - ${item.title}</h5></li>

}

listBox.innerHTML = listText;

let htmlText = "";

if (currentPage > 1) {

htmlText += `

<a href="#" onClick="pagination({'current-page': ${currentPage - 1}, 'page-size': ${pageSize}})">

上一页

</a>

}

for (let i = 1; i < totalPage + 1; i++) {

htmlText += `

<a href="#" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">

${i}

</a>

}

if (currentPage < totalPage) {

htmlText += `

<a href="#" onClick="pagination({'current-page': ${currentPage + 1}, 'page-size': ${pageSize}})">

下一页

</a>

}

let pagination = document.querySelector(".pagination");

pagination.innerHTML = htmlText;

}

</script>

</body>

</html>

你少了一个参数：默认显示几个页码，比如是nums，默认5。然后for生成页码时根据这个当前页码和这个参数nums去生成。然后注意页码的边界修正

而且一般翻页也不是像你说的那个每五个一组的显示的。大多是保证当前页在页码列表的中间

引用 2 楼泡泡鱼_ 的回复:

而且一般翻页也不是像你说的那个每五个一组的显示的。大多是保证当前页在页码列表的中间

明白，我先修改代码，谢谢！

引用 1 楼泡泡鱼_ 的回复:

你少了一个参数：默认显示几个页码，比如是nums，默认5。然后for生成页码时根据这个当前页码和这个参数nums去生成。然后注意页码的边界修正

您好，

我修改了代码，但是分页功能出现错误。这段代码该如何修改？
谢谢！

JavaScript code?

for (let i = 1; i < totalPage + 1; i++) {

htmlText += `

<a class="item-link" href="#" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">

${i}

</a>

}

1、当前页码数高亮
2、可以选择一页多少个
3、当页码数超过一定量时怎么显示（100页、200页这种）
4、可以跳转某一页
5、只有一页时隐藏分页功能

引用 4 楼 phoenix.sky 的回复:

Quote: 引用 1 楼泡泡鱼_ 的回复:
你少了一个参数：默认显示几个页码，比如是nums，默认5。然后for生成页码时根据这个当前页码和这个参数nums去生成。然后注意页码的边界修正
您好，

我修改了代码，但是分页功能出现错误。这段代码该如何修改？
谢谢！
JavaScript code?
for (let i = 1; i < totalPage + 1; i++) {
htmlText += `
<a class="item-link" href="#" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">
${i}
</a>
`;
}

就是计算呀，得出for中i的范围呀……大概下面这样子的意思吧

XML/HTML code?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Go Coding!</title>

<style>

* {

margin: 0;

padding: 0;

border: none;

list-style: none;

text-decoration: none;

font-size: 12px;

}

body {

padding: 20px;

}

.title {

font-size: 16px;

color: #f80;

}

.list > li {

padding: 6px;

border-bottom: 1px solid #eee;

}

.pagination {

padding: 4px;

}

.pagination a {

display: inline-block;

padding: 4px;

margin: 0 4px 0 0;

color: #00c;

}

.pagination a.curr {

display: inline-block;

padding: 4px;

margin: 0 4px 0 0;

background-color: #000;

color: #fff;

}

</style>

</head>

<body>

<ul class="list"></ul>

<section class="pagination"></section>

<script>

let data = {

list: [

{ id: 1, title: 2001 },

{ id: 2, title: 2002 },

{ id: 3, title: 2003 },

{ id: 4, title: 2004 },

{ id: 5, title: 2005 },

{ id: 6, title: 2006 },

{ id: 7, title: 2007 },

{ id: 8, title: 2008 },

{ id: 9, title: 2009 },

{ id: 10, title: 2010 },

{ id: 11, title: 2011 },

{ id: 12, title: 2012 },

{ id: 13, title: 2013 },

{ id: 14, title: 2014 },

{ id: 15, title: 2015 },

{ id: 16, title: 2016 },

{ id: 1, title: 2001 },

{ id: 2, title: 2002 },

{ id: 3, title: 2003 },

{ id: 4, title: 2004 },

{ id: 5, title: 2005 },

{ id: 6, title: 2006 },

{ id: 7, title: 2007 },

{ id: 8, title: 2008 },

{ id: 9, title: 2009 },

{ id: 10, title: 2010 },

{ id: 11, title: 2011 },

{ id: 12, title: 2012 },

{ id: 13, title: 2013 },

{ id: 14, title: 2014 },

{ id: 15, title: 2015 },

{ id: 16, title: 2016 },

],

}

let list = data.list

console.log(`list-length: ${list.length}`)

pagination({

current: 1,

size: 5,

nums: 5,

})

function pagination(config) {

let listBox = document.querySelector(".list")

let num = data.list.length

let totalPage = 0

let pageSize = config.size

let currentPage = config.current

let nums = config.nums || 5

if (num / pageSize > parseInt(num / pageSize)) {

totalPage = parseInt(num / pageSize) + 1

} else {

totalPage = parseInt(num / pageSize)

}

let sliceStart = (currentPage - 1) * pageSize

let sliceEnd = currentPage * pageSize

sliceEnd = sliceEnd > num ? num : sliceEnd

let dataSlice = data.list.slice(sliceStart, sliceEnd)

let listText = ""

for (let item of dataSlice) {

listText += `

<li><h5 class="title">${item.id} - ${item.title}</h5></li>

}

listBox.innerHTML = listText

let htmlText = ""

if (currentPage > 1) {

htmlText += `

<a href="#" onClick="pagination({current: ${

currentPage - 1

}, size: ${pageSize},nums:${nums}})">

上一页

</a>

}

let start = currentPage - Math.floor(nums / 2)

let end = currentPage + Math.floor(nums / 2)

//保证有nums个页码在显示

end < nums && (end = nums)

//最大页码修正

end > totalPage && (end = totalPage)

//保证有nums个页码在显示

end - start != nums - 1 && (start = end - nums + 1)

//最小页码修正

start < 1 && (start = 1)

for (let i = start; i <= end; i++) {

htmlText += `

<a href="#" ${

i === currentPage ? 'class="curr"' : ""

} onClick="pagination({current: ${i}, size: ${pageSize},nums:${nums}})">

${i}

</a>

}

if (currentPage < totalPage) {

htmlText += `

<a href="#" onClick="pagination({current: ${

currentPage + 1

}, size: ${pageSize},nums:${nums}})">

下一页

</a>

}

let pagination = document.querySelector(".pagination")

pagination.innerHTML = htmlText

}

</script>

</body>

</html>

引用 5 楼 gqkmiss 的回复:

1、当前页码数高亮
2、可以选择一页多少个
3、当页码数超过一定量时怎么显示（100页、200页这种）
4、可以跳转某一页
5、只有一页时隐藏分页功能

您好，

3、当页码数超过一定量时怎么显示（100页、200页这种）
该如何修改代码？

谢谢！

引用 7 楼 phoenix.sky 的回复:

Quote: 引用 5 楼 gqkmiss 的回复:
1、当前页码数高亮
2、可以选择一页多少个
3、当页码数超过一定量时怎么显示（100页、200页这种）
4、可以跳转某一页
5、只有一页时隐藏分页功能
您好，

3、当页码数超过一定量时怎么显示（100页、200页这种）
该如何修改代码？

谢谢！

思路：比如100页的时候，展示1、2、3 ... 98、99、100；按照这种情况展示。

引用 8 楼 gqkmiss 的回复：

Quote: 引用 7 楼 phoenix.sky 的回复:
Quote: 引用 5 楼 gqkmiss 的回复:
1、当前页码数高亮
2、可以选择一页多少个
3、当页码数超过一定量时怎么显示（100页、200页这种）
4、可以跳转某一页
5、只有一页时隐藏分页功能
您好，

3、当页码数超过一定量时怎么显示（100页、200页这种）
该如何修改代码？

谢谢！
思路：比如100页的时候，展示1、2、3 ... 98、99、100；按照这种情况展示。

代码如何实现？谢谢！

匿名用户不能发表回复！

这几天的记录,关于分页功能实现的过程中遇到的问题以及解决思路

下面的这张图片的我分页功能的其中一个实现方法,但是这个实现方法有一个bug,就是如果从当前页查询两页以及两页以上,那么最后一页的内容会完全覆盖掉,前面几页的内容。究其原因是放入返回给前端的mapShowCategory对象里面的showCategorymap...

分页功能实现思路_SHI-L

最近项目中开发了分页功能,开发过程中一边开发一边梳理思路,虽然马马虎虎开发完成了,但是总感觉有什么地方没有考虑到。写这篇博客的目的主要还是想再理顺一下思路,如果有考虑不到的地方还希望大家批评指正。再有就是当个知识点记录一下,...

vue+element实现分页及条件搜索功能(纯前端分页)

学习vue+element做用户...ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现) <div id="user"> 1. <el-table :data="userInfo.slice((currentPage-1)*pageSize,currentPage*pageSize)" ...

关于Android阅读器文本分页问题

本人刚入门安卓不久，最近想自己做个阅读器练手，但是在卡在阅读分页这里了，查阅了很多资料，也看了很多帖子，但都感觉说的似是而非的，一直没有解决，因此想请教一下大家该怎么做，希望大家能给我一个设计思路。

关于分页功能的实现_zhang150114的博客_分页功能

关于分页功能的实现需求:指定每页需要显示多少条数据库的信息。所用技术:Angular.js + Ajax + Hibernate。一、创建一个工具类:Page**。**里面有五个参数,分别是: pageNow当前页数,pageSize每页显示记录的条数、totalCount总记录...

EasyUI Pagination分页功能的实现讲解以分页没有效果问题_邹涛的...

EasyUI Pagination 分页没有效果?分页功能的实现讲解本次某个项目中用到Easyui+SSM框架,而easyui-Pagination在前后台分页的写法比较多,但是相对固定,于是我在这里直接写一份关于easyui下的分页教程,省得以后到处找,也方便各位参考。

分享一个完整的Mybatis分页解决方案

Mybatis 的物理分页是应用中的一个难点，特别是配合检索和排序功能叠加时更是如此。我在最近的项目中开发了这个通用分页器，过程中参考了站内不少好文章，新年第一天，特此发文回馈网站。特别鸣谢 paginator...

DWZ (JUI) 教程一个页面多Table多分页的问题

如题，我想请教一下，一个页面有多个table，多个pagination，一个pagerForm。这种情况下怎么解决多个pagination不同pagenum的问题呢？希望您帮忙给个思路就行，非常感谢！如果是这样的滴话，使用局部刷新...

简单的分页功能总结_wwww8260919的博客

实现一个分页功能 最近进行Web网页开发,突然发现以前一直被自己忽略掉的一个网页很重要的功能就是分页,之前一直根据师兄的建议使用PageHelper这个工具,但是在进行某些数据打包操作的时候会出现自己无法解决的问题(毕竟自己比较菜,对于一些自己...

第一次自己写分页功能感想_weixin_30696427的博客

没有看过任何人的分页代码,还没有完全想清楚该怎么控制页码显示,就匆匆开始写了起来,结果导致发生了许多的错误,得不到自己想要的结果,而且自己思路一开始也有点问题,也没有换种方式思考,最后卡壳了好久,最后换了思路想了一想,达到了...

请教关于分页插件扩展的问题 请教一个问题,listview里面嵌套gridview的问题

如果要让gridview显示完全,就需要重写gridview的onMeasure方法,但是这样会导致gridview里面的viewholder不能够被复用,假如一个item的gridview的view item 有很多(可以复用gridview的adapter然后加上分页,这是我能够...

实现分页功能后的一些感悟_basky的专栏

公司要做的系统目前需要分页,应该说这是每一个要做jsp的人都会经过的阶段,我也不能免俗。之前用过别人推荐的extreme table,当时的确觉得好用,但如果我只要一个分页的话发现那有些过了,等于我们只要一个windows 播放器而你却给了一...

分页功能_weixin_45945882的博客

分页功能1、PageBean 写总行数countRow、总页数countPage、页几行PageRow(默认5)、当前页nowPage(默认1)2、daoImpl类中原有的查询基础上利用上层传来的PageBean对象query设置查询第一条结果和几条结果 setFirstResult pageBean....

PHP关于多表操作展示数据,请大牛给点思路

楼主小白,遇到这种情况了,我需要在一个页面同时展示多个表的数据,并且每个表的数据都有分页和搜索功能, 假设有4个表数据,我弄成了js隐藏掉3个,只显示当前这一个,这种应该情况的思路是什么呢?我是想分控制器来写,...

**PHP分步表单提交思路（分页表单提交）

我用php做了3张表单分布在3个页面想在最后一页再插入数据库并且：在插入数据库之前 3个页面后退前进表单的内容会被保留以便随时更改能实现吗？想过session 感觉内容太多给服务器的压力较大不过仍然感谢你。...

如何实现一个小说分页的功能_程序员黑叔的博客

先让我找找我的思路在哪里? 在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢? 因为没有什么思路,那就只能在前辈的项目中寻找思路了。这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,...

Java中如何实现分页功能_u011277123的博客_分页功能如何...

Java实现分页功能的具体思路: 这里先说下Java实现分页的具体思路,主要就是利用了jquery.pagination这个插件,这个插件的原理就是你只要给他一个必选的总条数参数,然后在回调函数去操作数据就可以了,后台只需要返回数据即可。

个人博客从无到有(2) -- 富文本、分页、点赞、浏览量等功能完善

接上一篇内容，本周又整理了思路，落实了功能内容，挨个完善。其中遇到了非常多的困难，主要是因为不熟练，很多现成的功能要到处借鉴抄袭，具体的代码思路还是混乱的。但总算经过自己不懈努力和大神的指导，基本完成...

分页查询多类数据且不同排序规则（解决方案）

开篇：最近做了一个需求分享一下...就是一个分页呗！进入详细设计的我眉头一皱！发现问题没这么简单，最开始考虑无非就是把数据按照查出来再重排序呗，后来经过反复推敲不行，分页是个问题，在数据量小的时候我...

基于struts+hibernate请教分页问题小弟有个页面的问题想请教大家架构设计：系统间通信（40）——自己动手设计ESB（1）

这是对本专题从第19篇文章到第39篇文章中所介绍的知识点的最好的总结。我们自己动手设计ESB中间件，不是为了让它商用，也不是为了让它可以比拟市面上某款ESB中间件，甚至不是为了把ESB中的技术难点的解决全部方案化...

我用 10 张脑图，征服了一系列大厂面试官。

我把自己以往的文章汇总成为了 Github ，欢迎各位大佬 star ...已提交此篇文章秋招也快接近尾声了，我在秋招的结尾意外地收获了网易互娱的 Offer，秋招就此结束，写下这篇文章是为了帮助更多师弟师妹们，希望能帮助到...

【单页应用】一起来单页应用吧，实现简单微博功能！（上）

前言北上是大城市，魔都这里的节奏确实比成都快得多，在成都老夫一般...工作第一周到周三了才把电脑这些事情搞好，期间又要找房子，搬家，所以第一周没干神马事情就结束了，老大也没有分配任务。第二周一开始就...

回顾2017：谈谈过去一年的成长

前不久支付宝的年度账单刷屏朋友圈，作为一名程序员，我也来晒晒我的2017年度技术“账单”。 2017年度成长“账单” Github：89 stars, 37 forks spring-boot-learning-examples: 62 stars, 27 forks java-...

求分页思路啊，整了几天了，一筹莫展含HTML标记的内容分页

====================================================== 注：本文源代码点此下载 ====================================================== 评论 2011888 #1楼 2009-03-20 21:56 ...200

请问怎么把一个动态表格分成多部分创建到一个新的DIV里?

我想实现的是这样的一个功能,我动态创建了一个表格,放到一个固定高度的DIV中,类似于word的页面. 如果我的表格中的内容太多,无法在这个DIV中完全显示,我就需要创建一个相同的DIV,并把不能显示的表格内容创建到新的...

sqlserver数据库分页问题

sqlserver数据库分页问题，急、、、楼主zhaosy（盛）2005-11-03 11:04:18 在 Java / J2SE / 基础类提问各位兄弟姐妹，这个程序再oracle、mysql上执行没任何问题其中：$where为条件，currentPage为当前页码，...

golang json 获取所有key_请教如何获取这个api的全部数据？

现在有一个api返回的数据是分页返回，需要分页调用来获取全部数据并保存下来，但是接口的返回json格式比较混乱，新手不太会写，求教。json返回格式大概类似如下结构：{"code": 0,"msg": "","data": {"0": {"id": 1,...

30亿日志，检索+分页+后台展示，你是否遇到过更奇葩的需求？

沈老师，你好，想请教一个数据库查询日志，前台页面显示的问题。需求：（1）按照某些特定检索条件查询日志；（2）通过前台Web页面查询并显示相关日志信息；（3）检索需求包含...

写一个操作系统有多难？自制 os 极简教程

不知道正在阅读本文的你，是否是因为想自己动手写一个操作系统。我觉得可能每个程序员都有个操作系统梦，或许是想亲自动手写出来一个，或许是想彻底吃透操作系统的知识。不论是为了满足程序员们自带的...

使用jeesite框架写一个树结构的列表页面（一般的数据表结构）

　做这个需求之前，我大致阅读了jeesite官方文档（https://jeesite.gitee.io/docs/）关于树表结构的文档（带有树表两个字的都看了看），查看了jeesite框架中自带的页面实例，又查看了项目中一些运用了树结构的页面...

自制 os 极简教程1：写一个操作系统有多难

点击上方“五分钟学算法”，选择“星标”公众号重磅干货，第一时间送达不知道正在阅读本文的你，是否是因为想自己动手写一个操作系统。我觉得可能每个程序员都有个操作系统梦，或许是想亲自动手写出来...

现在是刚入门级的程序员，今天在做详情页的时候要做上一条、下一条这样的操作。最开始想到的是用分页的思维做，其实也是用分页的原理，但是不是直接的分页原理来处理，需要拐个弯。最开始我就直接点击列表里的...

OpenGL-实现视频播放(FFMpeg)

课程采用FFMpeg作视频解码，采用OpenGL实现视频的渲染，从RGB数据的绘制，到直接渲染YUV数据，实现三路YUV数据单纹理的输入，提升系统性能，接着采用PBO方式优化内存到显存的传输，实现DMA传输，解放CPU,将解码和渲染分离到不同的线程中，极大的提升了系统的性能。后介绍视频特效的实现。介绍如何采用OpenGL渲染视频帧数据，从固定管线到可编程管线一次实现，采用PBO实现DMA数据传输处理，以及简单的视频特效的实现。

Ubuntu-18.04 64位iso镜像文件

此文件是Ubuntu-18.04 64位iso镜像文件，可直接在VMware虚拟机上安装

各种图像去噪代码总结（matlab）（10种）

这是学了一个月的图像预处理整理出的图像去噪代码，常见的基本去噪代码均有，共10种：巴特沃斯高通滤波、高斯滤波、各向异性扩散、均值滤波、双边滤波、同态滤波、维纳滤波、小波去噪、中值滤波、自适应中值滤波等。

Microsoft Visual C++ 2015-2019 运行库合集，包含32位64位

Microsoft Visual C++ 2015-2019 运行库合集，32位64位都有，解决缺失dll包问题。

相关热词 c# 查看句柄 c# gettime c#仪表控件 c#窗体美化包 c# 数据结构和算法 c#+lable加下划线 c# 结构体函数参数 c# 委托本类 c# 页游辅助 c#绘制虚线

关于一个分页功能，没有思路了，想请教。

关于一个分页功能，没有思路了，想请教。

Recommend

只有6座/综合续航更长 2021款理想ONE售33.8-34.8万

‎App Store 上的“Artech - 图片与视频艺术特效”

Share what's on your mind

Rapchat - Recording studio on your phone | Product Hunt

Winfrom求助

‎App Store 上的“AppShot - App截图制作工具”

这款远程桌面软件开源了 - 近半生少年 - 开发者头条

注定孤单的汽车电影…

有人科普下，为什么独行侠球风克快船？

Valencia anuncios clasificados de computadoras, accesorios, tablets, electrónica...

About Joyk