html、js实现分页展示的功能

最新推荐文章于 2024-05-11 14:22:31 发布
最新推荐文章于 2024-05-11 14:22:31 发布
阅读量2.7k 收藏 24
点赞数 12
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45859087/article/details/119116069
版权

html、js实现简单的分页功能

逻辑

简单的逻辑实现：初始的curPage是1、通过登录界面将curPage传入到list.html的QueryString中
在这里插入图片描述
在后端的逻辑处理是：
后端通过获取到的curPage、来进行分页查询
在这里插入图片描述
获取前端传来的参数curPage、每次只查询七个结果、如果在前端点击下一页的话、那么curPage + 1 、也就是下一次开始的位置是上一次查询的结束的位置。
在这里插入图片描述

在这里插入图片描述

效果

在第一页点击上一页：

最低0.47元/天 解锁文章
保护眼睛
关注
  • 12
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 32
    评论
专栏目录
html+js实现分页功能
qq_42554719的博客
02-14 4587
js代码 <script> $(function () { //获取上一页html传递过来的id信息 var search = location.search; var cid = search.split("=")[1]; //调用异步交互方法 loa...
前端js分页功能的实现，非常实用，新手必看
weixin_30724853的博客
06-24 5135
分享一个前端拿到数据后，自己生成分页的案例，案例如图显示，点击搜索后查询数据，显示数据列表，前端根据数据显示正确的分页 附上代码：代码附上,简单粗暴，自己用过的，兼容性好，没有封装，可以很好的分页原理，希望可以帮助到大家 html排版如下： <!--搜索列表--><div class="search"> <div class="co...
html前台分页,静态分页,使用及其简单,支持多个列表
05-24
html前台分页,静态分页,使用及其简单,支持多个列表
2024年Web前端最全最详细的JS动态创建表格以及实现分页!(1)，2024年最新程序员面试题及答案
最新发布
2401_84619432的博客
05-11 734
第条,总共条数据
通用分页详解（前端）
m0_74915426的博客
06-29 5431
首页
前端实现分页效果
热门推荐
welcome
09-09 1万+
前端分页？后端做得了的事，我前端也要做。后端做不了的事，我前端更要做。
前端分页(详细步骤)
naoguaten的博客
12-22 1万+
一、思路 1.设置全局变量，当前页，总页数，总条数，每页显示多少条，所有页数据，当前页数据，start（总数据开始截取位置）、end（总数据结束截取位置） 2.调用接口，请求到所有的数据后，改变相应的全局变量 3.通过对总数据进行filter过滤得到当前页数据，然后把数据渲染到表格上， 4.其他操作：如页码的点击、左右箭头的点击都会改变当前页的内容，就是改变相应全局变量，然后重新过滤当前页数据，然后进渲染到页面上 二、具体步骤 1.定义变量 //当前页 let nowPage = 1 // 每页显示多少条
用JS实现分页功能
Steven_2669的博客
08-10 3475
最近做项目的时候又碰到了分页，不想用网上的插件，于是就自己捣鼓了一下，在这里把过程写下来，分享一下经验。 首先，我们应该明确一下分页的逻辑步骤： 从后台获取数据（我这里用的是AJAX获取） 确定每页显示数量以及总页数 显示数据 接下来，开始写代码： .html部分 假设html文件里已经有一个表格框架和分页按钮，默认页数设为1（为了方便我直接用bootstrap框架写分页按钮） d
基于vue.js实现分页查询功能
10-17
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的分页查询功能，这在数据量较大的应用中非常常见。...总的来说，Vue.js提供了一种灵活的方式来构建这样的功能，使得开发者能够快速且高效地实现分页查询。
利用js制作html table分页示例(js实现分页)
10-26
主要介绍了利用js制作html table的分页示例(js实现分页),需要的朋友可以参考下
JS实现的简单分页功能示例
10-18
在提供的代码示例中，`goPage`函数是实现分页的关键。它接收两个参数：`pno`代表当前页数，`psize`表示每页要显示的记录数。该函数首先获取表格`idData`的行数（即所有记录数），然后计算总页数。如果记录数除以每页...
js实现分页功能
10-19
js实现分页功能是Web开发中常见的一种需求，特别是在处理...总的来说，JavaScript实现分页功能涉及到前端与后端的交互，以及良好的用户体验设计。通过理解分页的原理和代码实现，我们可以构建出高效、易用的分页系统。
javascript实现前端分页功能
01-22
前言：今天给大家带来的是前端数据的分页功能，供大家参考，具体内容如下 先上一波效果图展示： 直接上代码：这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML： <!DOCTYPE ...
html分页效果怎么加,CSS 分页效果制作实例教程
weixin_35202718的博客
06-03 644
这个教程也包含有实现Flickr、Digg式的简洁分页样式的HTML/CSS代码，随时可以应用于你的WEB项目中。Update as March 17, 2008:My friends Simone Saveri solved some issuse with IE6 and IE7.Download this tutorial (original)Download this tutorial (...
html在分页功能中如何实现当前页面的页码样式与其他页面不同_前端组件之分页组件...
weixin_39756416的博客
12-01 710
今天继续组件文章的分享,今天来讲讲分页组件。分页组件用在地方很多，特别是内容比较多，用分页能更好显示内容,下面讲下如何实现.想要做一个组件,首先要想该组件时什么样子的,有什么样式,有什么功能,其结构是如何的.这是我想实现的组件的样子,先分析一下如何实现分析组件功能分析首先,先是上一页的按钮,后面紧跟着页数的按钮，而页数的按钮后跟下一页的按钮。有了按钮，也要有显示 当前页数总数有多少，那么就有显示现...
BootStrap分页
qq_39529315的博客
05-31 283
&lt;nav&gt;元素作为标注一个导航的链接区域。增强语义化。普通类型的分页：使用pagination，有pagination-lg、pagination-sm等改变大小的方法&lt;nav&gt;  &lt;ul class="pagination"&gt;    &lt;li&gt;      &lt;a href="#" &gt;        &lt;span &amp
前端分页功能（通用）
末安的博客
11-23 7445
欢迎收看《好看的博文没人赞》系列 前言：今天给大家带来的是前端数据的分页功能 先上一波效果图展示： 直接上代码：这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="styles...
工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办
商务合作 / 项目定制开发 / 前端一对一培训、答疑
06-28 2706
因为后端返回给你的数据，你一般会整个存放在一个数组中，要显示第一页，其实就是在该数组中分割提取下标为0-9的数据项，如果是第三页，则在该数组中提取第20-29的数据项，创建一个计算属性，在该计算属性中完成数据的提取，再给到视图即可。有这么个场景，后端接口的列表数据没有做分页给我，相当于是直接返回所有的列表数据，比如有100条就返回100，但是前端显示，则需要做成分页，比如10条为一页。框架，其实也很好办，主要是记住以上前端分页的思路：找到某一页的开始下标和结束下标，然后去分割数组，返回给视图。
MySQL：limit分页公式、总页数公式
qq_40903237的博客
07-10 2934
1)limit分页公式 （1）limit分页公式：curPage是当前第几页；pageSize是一页多少条记录 limit (curPage-1)*pageSize,pageSize （2）用的地方：sql语句中 select * from student limit(curPage-1)*pageSize,pageSize; 2)总页数公式 （1）总页数公式：tot...
前端分页功能代码怎么实现
05-20
前端分页功能可以通过以下步骤实现： 1. 定义每页显示的数据条数和当前页码。 2. 根据当前页码和每页显示的数据条数，计算出需要显示的数据的起始索引和结束索引。 3. 使用JavaScript数组的slice方法截取需要显示的数据。 4. 将截取得到的数据渲染到页面上。 5. 生成分页按钮，并添加点击事件，点击按钮时更新当前页码，并重新渲染数据。 下面是一个简单的示例代码： HTML部分： ```html <div id="data"></div> <div id="pagination"></div> ``` JavaScript部分： ```javascript // 数据 const dataList = [/* 数据数组 */]; // 每页显示的数据条数 const pageSize = 10; // 当前页码 let currentPage = 1; // 获取需要显示的数据 function getData() { const startIndex = (currentPage - 1) * pageSize; const endIndex = startIndex + pageSize; return dataList.slice(startIndex, endIndex); } // 渲染数据 function renderData() { const dataDiv = document.getElementById('data'); const data = getData(); let html = ''; data.forEach(item => { html += `<p>${item}</p>`; }); dataDiv.innerHTML = html; } // 生成分页按钮 function renderPagination() { const paginationDiv = document.getElementById('pagination'); const totalPages = Math.ceil(dataList.length / pageSize); let html = ''; for (let i = 1; i <= totalPages; i++) { html += `<button>${i}</button>`; } paginationDiv.innerHTML = html; // 给按钮添加点击事件 paginationDiv.querySelectorAll('button').forEach((btn, index) => { btn.addEventListener('click', () => { currentPage = index + 1; renderData(); renderPagination(); }); }); } // 初始化 renderData(); renderPagination(); ``` 在实际应用中，需要根据具体需求对代码进行适当修改和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值