Realice la función de visualización de paginación utilizando la simulación de json local de solicitud http (ajax + jquery + json)
Descripción del problema
Recientemente encontré un requisito funcional en un proyecto e hice un efecto de visualización de paginación, como se muestra en la siguiente figura
Descripción de la idea
Para solucionar este problema, primero debemos tener una idea clara
Cuando solicitamos miles de mensajes de la base de datos de back-end, definitivamente no se mostrará una página, por lo que deberíamos pensar en la paginación. Entonces, ¿cómo paginas?
Debemos especificar cuántos datos se muestran en cada página, como 10, 15 ...
Cuando hemos especificado el número de elementos que se mostrarán, ¿cuántas páginas debemos dividir en consideración? Entonces, ¿cómo se encuentra el número de páginas?
Por ejemplo, si solicita 100 piezas de datos y se le permite mostrar 10 piezas por página, entonces tiene 10 páginas. Por lo tanto, debe usar la longitud de los datos que solicitó / el número de elementos que se muestran en cada página, que es el número de páginas.
Después de obtener el número total de páginas, agregaremos el número de página, donde se diseñan específicamente los requisitos específicos
Luego es escribir eventos de clic para estos botones de etiqueta. Cómo hacer clic en la página anterior, cómo hacer clic en la página siguiente, cómo hacer clic en el número de página generado dinámicamente para mostrar los datos correspondientes a esta página, etc. La idea de esta pieza es mirar el código directamente.
Análisis de código principal
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>
El código css se omite, solo algunas configuraciones de estilo, muy simple
Principalmente mire el código js, yo uso jQuery aquí
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");
})
})