admin 管理员组

文章数量: 887021

通过使用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>

本文标签： 分页 功能 Json http Ajax

版权声明：本文标题：通过使用http请求本地json模拟实现分页展示功能（ajax+jquery+json） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726435113h960064.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。