通过使用http请求本地json模拟实现分页展示功能(ajax+jquery+json)

本文通过一个项目实例,详细介绍了如何利用http请求本地JSON数据来实现分页功能。首先,阐述了分页需求的背景及思路,包括确定每页展示数据的数量以及计算总页数的方法。接着,重点解析了JavaScript部分,特别是使用jQuery处理分页点击事件和展示对应数据的代码实现。
摘要由CSDN通过智能技术生成

通过使用http请求本地json模拟实现分页展示功能(ajax+jquery+json)

问题描述

最近做项目遇到一个功能需求,做一个分页显示效果,如下图所示
在这里插入图片描述

思路描述

要解决这个问题,首先要有一个清晰的思路

当我们从后台数据库请求到成千上万条的消息时,一个页面肯定展示不下,那我们就应该想到分页。那么如何分页呢?

我们肯定要规定每页展示多少条数据,比如10条、15条…

当我们规定了展示的条数后,我们应该考虑到一共分为多少页?那么怎么求页数呢?
举个例子,假如你请求到100条数据,你每页允许展示10条,那么你就是10页。所以你应该用你请求到的数据的length/每页展示的条数,就是页数,

获取到总页数后,我们进行添加页码,这里具体需求具体设计

然后就是对这些标签按钮写点击事件了,点击上一页怎么操作、点击下一页怎么操作、点击动态生成的页码怎么展示这一页对应的数据、等等、这块的思路直接看代码。

主要代码分析

html

				<div class="bd_content_right">
                    <p>设备日志</p>
                    <hr>
					<nav>
						<input type="search" name="search" id="log_search" placeholder="请输入MAC或Id" />
						<label for="log_search"></label>
						<span>搜索</span>
					</nav>
					<div class="datasShow">
						<p>设备列表</p>
						<table class="deviceList">
							<thead>
								<tr>
									<th>设备MAC</th>
									<th>设备ID</th>
									<th>首次上线</th>
									<th>累计上线次数</th>
									<th>最后一次上线时间</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="pageMain">
							<!-- 这个位置我们通过js动态添加tr、td -->
							</tbody>
						</table>
					</div>
				
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值