实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0b88a6c78b345efa4db9b9850e240566.png)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表和分页01</title>
<style>
#myTable {
width: 100%;
border-collapse: collapse;
}
#myTable td {
border: 1px solid #666;
padding: 8px;
}
.page {
padding-top: 10px;
width: 260px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.page button {
padding: 5px;
}
.border {
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="main">
<table id="myTable"></table>
<div class="page">
<button type="button" id="pageUp" onclick="prev()">上一页</button>
<button type="button" id="pageDown" onclick="next()">下一页</button>
</div>
<div id="page2"></div>
<div id="page3"></div>
</div>
<script>
var myTable = document.getElementById('myTable')
var prevBtn = document.getElementById("pageUp")
var nextBtn = document.getElementById("pageDown")
var dataAll = [{
name: '01wangjie',
age: 1,
like: '足球'
}, {
name: '02wangjie',
age: 2,
like: '足球'
}, {
name: '03wangjie',
age: 3,
like: '足球'
}, {
name: '04wangjie',
age: 4,
like: '足球'
}, {
name: '05wangjie',
age: 5,
like: '足球'
}, {
name: '06wangjie',
age: 6,
like: '足球'
}, {
name: '07wangjie',
age: 7,
like: '足球'
}, {
name: '08wangjie',
age: 8,
like: '足球'
}, {
name: '09wangjie',
age: 9,
like: '足球'
}, {
name: '10wangjie',
age: 10,
like: '足球'
}, {
name: '11wangjie',
age: 11,
like: '足球'
}, {
name: '12wangjie',
age: 12,
like: '足球'
}, {
name: '13wangjie',
age: 13,
like: '足球'
}, {
name: '14wangjie',
age: 14,
like: '足球'
}, {
name: '15wangjie',
age: 15,
like: '足球'
}, {
name: '16wangjie',
age: 16,
like: '足球'
},]
var list = ''
var total = dataAll.length;
var pageSize = 5;
var page = 1
var currentPage = 1
tempStr = ''
showData(dataAll)
if (dataAll.length / pageSize > parseInt(dataAll.length / pageSize)) {
page = parseInt(dataAll.length / pageSize) + 1
} else {
page = dataAll.length / pageSize
}
console.log('page', page)
function showData(data) {
list = []
data = data.slice(pageSize * (currentPage - 1), currentPage * pageSize)
data.forEach(item => {
list = list + `<tr><td>${item.name}</td><td>${item.age}</td><td>${item.like}</td></tr>`
})
myTable.innerHTML = list
}
if (dataAll.length / pageSize > parseInt(dataAll.length / pageSize)) {
total = parseInt(dataAll.length / pageSize) + 1
} else {
total = parseInt(dataAll.length / pageSize)
}
function btnDisabled() {
if (currentPage <= 1) {
prevBtn.disabled = true;
nextBtn.disabled = false;
} else if (currentPage >= total) {
prevBtn.disabled = false;
nextBtn.disabled = true;
}
}
btnDisabled()
function prev() {
currentPage = currentPage - 1
showData(dataAll)
btnDisabled()
document.getElementById("page2").innerHTML = "共" + dataAll.length + "条记录 分" + page + "页 当前第" + currentPage + "页";
}
function next() {
currentPage = currentPage + 1
showData(dataAll)
btnDisabled()
document.getElementById("page2").innerHTML = "共" + dataAll.length + "条记录 分" + page + "页 当前第" + currentPage + "页";
}
tempStr = "共" + dataAll.length + "条记录 分" + page + "页 当前第" + currentPage + "页";
document.getElementById("page2").innerHTML = tempStr
</script>
</body>
</html>