js部分:
window.onload = function () {
var find = document.getElementById('find');
var btnFind = document.getElementById('btn_find');
var btn = document.getElementById('btn').children;
loadContent(10);
function loadContent(num) {
//获取基础数据
var content = document.getElementById('content');
var json = [
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢1</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢2</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢3</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'},
{content: '<tr><td>祝君岁月无波澜,敬己余生不悲欢4</td></tr>'}
];
var text = '';
//json内容不够时拼接json,防止盒子坍塌
if (json.length % num !== 0) {
var sub = num - json.length % num;
for (var k = 0; k < sub; k++) {
var arr = [];
arr[k] = {content: '<tr><td></td></tr>'};
json = json.concat(arr[k]);
}
}
//获取总页数
var allPage = Math.ceil(json.length / num);
//按钮点击事件
btnCheck(allPage, json, num);
//将浏览器保存的页码传入
var c;
if (localStorage.getItem("c")) {
c = localStorage.getItem("c");
btn[1].innerText = localStorage.getItem("c");
} else {
c = 1;
}
//预加载
for (var i = (c - 1) * num; i < c * num; i++) {
text += json[i].content;
content.innerHTML = text;
}
}
function btnCheck(allPage, json, num) {
find.placeholder = '共 ' + allPage + ' 页';
//翻页效果
function change(json, num) {
var text = '';
var c = Number(btn[1].innerText);
for (var i = (c - 1) * num; i < c * num; i++) {
text += json[i].content;
content.innerHTML = text;
}
//浏览器保存页码
localStorage.setItem('c', c);
}
//页码转换效果
//查找
btnFind.onclick = function () {
if (Number(find.value) >= allPage) {
btn[1].innerText = allPage;
} else if (Number(find.value) <= 1) {
btn[1].innerText = 1;
} else {
btn[1].innerText = find.value;
}
find.value = '';
change(json, num);
};
//下一页
btn[2].onclick = function () {
if (Number(btn[1].innerText) < allPage) {
btn[1].innerText = Number(btn[1].innerText) + 1;
}
change(json, num);
};
//上一页
btn[0].onclick = function () {
if (Number(btn[1].innerText) > 1 && Number(btn[1].innerText) <= allPage) {
btn[1].innerText = Number(btn[1].innerText) - 1;
}
change(json, num);
};
}
}
css部分:
/*clear style*/
html {
color: #000;
background: #FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0
}
table {
border-spacing: 0
}
fieldset, img {
border: 0
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal
}
ol, ul {
list-style: none
}
caption, th {
text-align: left
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal
}
q:before, q:after {
content: ''
}
abbr, acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%
}
legend {
color: #000
}
a {
text-decoration: none
}
/*start*/
table {
margin: 100px auto;
text-align: center;
background-color: #333;
color: #eee;
border-radius: 20px;
padding: 30px;
box-shadow: 10px 10px 60px 2px black;
}
thead td {
padding-bottom: 20px;
font-size: 30px;
}
/*规定内容大小*/
tbody td {
width: 350px;
height: 40px;
font-size: 20px;
padding-bottom: 10px;
}
tbody tr:last-child td {
padding-bottom: 30px;
}
tfoot tr:first-child td ul {
width: 100%;
height: 40px;
float: left;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
tfoot tr:first-child td ul li {
border-radius: 10px;
padding: 10px;
background-color: #444;
user-select: none;
margin-left: 10px;
}
tfoot tr:first-child td ul li:hover {
background-color: #666;
}
tfoot tr:last-child td input {
margin-top: 20px;
border-radius: 10px;
height: 30px;
outline: none;
border: none;
}
tfoot tr:last-child td input:first-child {
margin-right: 10px;
text-align: center;
}
tfoot tr:last-child td input:first-child::placeholder {
color: #ccc;
}
tfoot tr:last-child td input:last-child {
width: 80px;
background-color: #222;
color: whitesmoke;
}
tfoot tr:last-child td input:last-child:hover {
background-color: #777;
}
html部分:
<table>
<thead>
<tr>
<td>分页</td>
</tr>
</thead>
<tbody id="content">
</tbody>
<tfoot>
<tr>
<td>
<ul id="btn">
<li>上一页</li>
<li>1</li>
<li>下一页</li>
</ul>
</td>
</tr>
<tr>
<td id="search">
<input type="number" placeholder="" id="find">
<input type="button" value="查找" id="btn_find">
</td>
</tr>
</tfoot>
</table>