Realize paging display function by using http request local json simulation (ajax+jquery+json)
Problem Description
Recently I encountered a functional requirement in a project, and made a paging display effect, as shown in the figure below
Idea description
To solve this problem, we must first have a clear idea
When we request thousands of messages from the backend database, one page will definitely not be displayed, so we should think of paging. So how do you paginate?
We must specify how many pieces of data are displayed on each page, such as 10, 15...
When we have specified the number of items to be displayed, how many pages should we divide into consideration? So how do you find the number of pages?
For example, if you request 100 pieces of data and you are allowed to display 10 pieces per page, then you are 10 pages. So you should use the length of the data you requested/the number of items displayed per page, which is the number of pages.
After obtaining the total number of pages, we will add the page number, where the specific requirements are specifically designed
Then write click events for these label buttons, click on the previous page, click on the next page, click on the dynamically generated page number, how to display the data corresponding to this page, etc. The idea of this piece is to look at the code directly.
Main code analysis
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>
The css code is skipped, just some style settings, very simple
Mainly look at the js code, I use jQuery here
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");
})
})