问题描述
最近做项目遇到一个功能需求，做一个分页显示效果，如下图所示
思路描述
要解决这个问题，首先要有一个清晰的思路
当我们从后台数据库请求到成千上万条的消息时，一个页面肯定展示不下，那我们就应该想到分页。那么如何分页呢？
我们肯定要规定每页展示多少条数据，比如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>
<div id="pageBox">
<span id="prev">上一页</span>
<ul id="pageNav"></ul>
<span id="next">下一页</span>
</div>
</div>
css代码就略过了，就是一些样式的设置，很简单
主要看一下js代码，我这里用的是jQuery
var devideData;
$(function() {
//这里是封装好的http请求，原理是ajax
getHttp({
url: "/newSmartCity2/data/deviceLog.json"
}).then((res) => {
devideData = res;
console.log(res);
for (var i = 0; i < 31; i++) {
//动态添加tr
var $tr = $('<tr>' +
'<td>' + devideData[i].MAC + '</td>' +
'<td>' + devideData[i].ID + '</td>' +
'<td>' + devideData[i].firstOnline + '</td>' +
'<td>' + devideData[i].CumulativeOnline + '</td>' +
'<td>' + devideData[i].lastOnline + '</td>' +
'<td>' + devideData[i].state + '</td>' +
'<td>' + devideData[i].operation + '</td>' +
'</tr>');
var $tbody = $('#pageMain');
$tr.appendTo($tbody);
}
/* 调用函数，注意，这里传的是一个对象*/
tabPage({
pageMain: '#pageMain',
pageNav: '#pageNav',
pagePrev: '#prev',
pageNext: '#next',
/*每页显示的条数*/
curNum: 10,
/*高亮显示的class*/
activeClass: 'active',
pageAlertClass: 'pageAlert',
ini: 0 /*初始化显示的页面*/
});
//定义函数，大部分主要逻辑都在这个函数里
function tabPage(tabPage) {
/*获取内容列表*/
var pageMain = $(tabPage.pageMain);
/*获取分页*/
var pageNav = $(tabPage.pageNav);
/*上一页*/
var pagePrev = $(tabPage.pagePrev);
/*下一页*/
var pageNext = $(tabPage.pageNext);
/*每页显示数*/
var curNum = tabPage.curNum;
/*计算总页数*/
var len = Math.ceil(pageMain.find("tr").length / curNum);
//console.log(len);
/*生成页码*/
var pageList = '';
/*当前的索引值*/
var iNum = 0;
for (var i = 0; i < len; i++) {
/* 动态的拼接出页码 */
pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
}
/* 将动态创建的几个页码a添加到预留下来的区域中 */
pageNav.html(pageList);
/*头一页加高亮显示*/
pageNav.find("a:first").addClass(tabPage.activeClass);
/*标签页的点击事件，为每一个都绑定点击事件，所以要遍历一下*/
pageNav.find("a").each(function() {
$(this).click(function() {
//去除所有a（页码）的样式
pageNav.find("a").removeClass(tabPage.activeClass);
//给当前点击的页码添加高亮样式
$(this).addClass(tabPage.activeClass);
//获取当前索引值，目的是为了判断是否点击到最后一页或者首页
iNum = $(this).index();
//先将所有的tr隐藏了
$(pageMain).find("tr").hide();
//循环遍历显示当前页所对应的数据
/*假如我每页显示10条数据，当我点击第二页的时候，($(this).html() - 1) * curNum
的值就为10，($(this).html()) * curNum的值就为20，所以显示的就是第10到20条数据
*/
for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
});
})
$(pageMain).find("tr").hide();
//初始页面的显示，显示的是前10条
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show();
}
/*下一页*/
pageNext.click(function() {
$(pageMain).find("tr").hide();
if (iNum == len - 1) {
/* $('<span class="pageAlert">'+'亲,已经是最后一页了'+'</span>').appendTo($('#pageBox')); */
/* alert('已经是最后一页'); */
//添加一个变灰的样式，提醒用户是最后一页了
$('#next').addClass(tabPage.pageAlertClass);
//不管怎么点都显示的是最后一页的内容
for (var i = (len - 1) * curNum; i < len * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum++;
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
// ini(iNum);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
});
/*上一页*/
pagePrev.click(function() {
$(pageMain).find("tr").hide();
if (iNum == 0) {
$('#prev').addClass(tabPage.pageAlertClass);
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum--;
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
})
}
}).catch(res => {
console.log("catch");
})
})