HTML+VUE分页实现炫酷物联网大屏功能代码示例
作者：袖梨
2022-06-25
本篇文章小编给大家分享一下HTML+VUE分页实现炫酷物联网大屏功能代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
效果
demo.html
数据大屏 css/style.css" />物联网平台数据统计page
page. js
var page_data = {
key: null,
pointId: null,
limit: 6,
total: 0, //总条数
pageIndex: 1, //第x页
totalPage: 0, // 总共页数，
activatePage: 1, //激活页 默认为1
currentPage: 1, //当前页数 ，默认为1
pagelist: 7, //分页按钮个数
pageSize: 10, // 每页显示数量
mid: 3, //点击按钮 分页按钮重新渲染时的位置 一般 是 pagelist /2 居中
factoryHeader: [{
"categories": "站点名"
},
{
"categories": "企业名"
},
{
"categories": "状态"
},
{
"categories": "操作"
}
],
factory: [],
timer: null //定时器
};
var page_vue = new Vue({
el: '#page',
data: page_data,
beforeCreate: () => {
// this.send();
console.log("创建前page_data")
},
created: () => {
// this.dtu();
console.log("创建完成page_data")
},
beforeMount: () => {
},
mounted() {
this.timer = setInterval(() => {
setTimeout(this.getCurrentPageData(), 0)
}, 1000 * 10)
console.log("挂载完成page_data：");
},
beforeUpdate() {
console.log('=即将更新渲染page_data=');
},
destroyed() {
clearInterval(this.timer);
this.timer = null;
},
watch: {},
methods: {
/* 监测列表 */
getCurrentPageData: function() {
axios({
headers: {
'Content-Type': 'application/json'
},
async: true,
method: 'post',
url: 'https://www.shbykj.top/bi/monitor/data',
data: {
'page': page_vue.$data.currentPage,
'limit': page_vue.$data.limit,
}
})
.then(function(res) {
console.log(res.data.data);
if (res.data.data) {
page_vue.$data.factory = res.data.data.data
page_vue.$data.total = res.data.data.total
console.log(".this.total" + page_vue.$data.total)
let begin = (page_vue.$data.currentPage - 1) * page_vue.$data.pageSize;
let end = page_vue.$data.currentPage * page_vue.$data.pageSize;
this.mid = Math.floor(page_vue.$data.pagelist / 2);
//这里自己diy请求数据
console.log("dataListLength总条数::::::" + page_vue.$data.total)
console.log("pageSize每页条数::::::" + page_vue.$data.limit)
//总页数
page_vue.$data.totalPage = page_vue.$data.total % page_vue.$data.limit == 0 ? page_vue.$data.total / page_vue
.$data.limit : Math.floor(page_vue.$data.total /
page_vue.$data.limit) + 1
console.log("totalPage总页数:" + page_vue.$data.totalPage)
}
})
.catch(function(error) {
console.log("大屏监控列表查询异常" + error);
});
},
// 设置当前页面数据，对数组操作的截取规则为[0~9],[10~20]...,
// 当currentPage为1时，我们显示(0*pageSize+1)-1*pageSize，当currentPage为2时，我们显示(1*pageSize+1)-2*pageSize...
//上一页
prevPage() {
console.log(this.currentPage);
if (this.currentPage === 1) {
return false;
} else {
this.currentPage--;
if (this.activatePage !== 1) {
if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
this.activatePage = this.currentPage - this.mid;
}
}
this.getCurrentPageData();
}
},
// 下一页
nextPage() {
if (this.currentPage === this.totalPage) {
return false;
} else {
if (this.activatePage !== this.totalPage - this.pagelist + 1) {
if (this.currentPage >= (this.pagelist - this.mid)) {
this.activatePage = this.currentPage - this.mid + 1;
}
}
this.currentPage++;
this.getCurrentPageData();
}
},
selectPage(event, msg) {
//计算 是往前还是往后移动
let gap = (this.activatePage + msg - 1) - this.currentPage;
//把 当前页更新
this.currentPage = this.activatePage + msg - 1;
if (this.currentPage > this.totalPage) {
this.currentPage = this.totalPage;
}
if (this.currentPage < 1) {
this.currentPage = 1;
}
//如果是 往前移动 需要 判断两种情况 第一种 如果移动到的下一步 加上 显示的页码按钮数 超出了 总页码数
//那么 我们就 把 页码按钮的起始更新为 页码数 - 页码按钮显示数 + 1
//如果小于等于 那么把 页码按钮更新为点击的页码按钮
if (gap > 0 && (this.currentPage + this.pagelist - 1) > this.totalPage) {
this.activatePage = this.totalPage - this.pagelist + 1;
} else if (gap > 0 && (this.currentPage + this.pagelist - 1) <= this.totalPage) {
//对 最小需要调整按钮的边界进行判断
if (this.currentPage >= (this.pagelist - this.mid)) {
this.activatePage = this.currentPage - this.mid;
}
}
//和上面 一样 我们需要判断 点击分页按钮的 索引 如果点击按钮的数 - 分页按钮的个数 小于0了 那我们 把 分页按钮其实位置改成0
//否则的 话 就直接 更新成 点击按钮的索引
if (gap < 0 && (this.currentPage - this.pagelist + 1) <= 1) {
this.activatePage = 1;
} else if (gap < 0 && (this.currentPage - this.pagelist + 1) > 1) {
//对 最大需要调整按钮的边界进行判断
if (this.currentPage <= (this.totalPage - this.pagelist + this.mid)) {
this.activatePage = this.currentPage - this.mid;
}
}
var el = event.currentTarget;
this.getCurrentPageData();
}
}
})
结构
