html代码如下:
<div id="app">
<table border="1" cellspacing="0" cellpadding="0" id="table" class="table-striped">
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
<th>gender</th>
<th>comment</th>
</tr>
</table>
<ul class="pagination">
<li class="first-page">首页</li>
<li class="prev-page">上一页</li>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">4</button>
<button class="btn btn-default">5</button>
<li class="next-page">下一页</li>
<li class="last-page">尾页</li>
<li><input type="text" class="form-control" placeholder="Search" /></li>
<!-- 回车,失去焦点 -->
<!--<input>{{queryInfo.pageNum}}</input>-->
</ul>
</div>
简单设置一下样式:
css:
<style>
#app {
width: 50%;
margin: 50px auto;
}
#table {
width: 100%;
text-align: center;
}
#table tr {
height: 30px;
}
.pagination {
display: flex;
align-items: center;
list-style: none;
justify-content: center;
}
.pagination > li {
border: 1px solid #ddd;
border-right: none;
margin-right: 10px;
cursor: pointer;
}
.pagination > li:last-child {
border: 1px solid #ddd;
}
button {
margin-right: 10px;
}
.btn-color {
background-color: #c00000;
color: #ffffff;
}
</style>
当然还需要在html中引用bootstarp的插件,可以节省写css
js:
//模拟的从远程服务获得到的数据
let arr = [];
let Arr = [
"rgba(187, 255, 255, 0.4)",
"rgba(0, 255, 127, 0.4)",
"rgba(192, 255, 62, 0.4)",
"rgba(0, 191, 255, 0.4)",
"rgba(255, 165, 0, 0.4)",
];
function init() {
for (let i = 0; i < 23; i++) {
let person = {};
person.name = "tony" + (i + 1);
person.age = parseInt(Math.random() * 8) + 18;
person.gender = Math.random() > 0.5 ? "男" : "女";
arr.push(person);
}
}
init();
console.log(arr);
//1、页面的渲染数据的数组
let dataList = [];
//2、分页参数
let queryInfo = {
//当前页码
pageNum: 1,
//一页几条
pageSize: 5,
//总条数
total: arr.length,
};
//3、获得当前页码对应的渲染数据
function getDataList() {
dataList = [];
let start = (queryInfo.pageNum - 1) * queryInfo.pageSize;
let end = start + queryInfo.pageSize;
if (end >= queryInfo.total) {
end = queryInfo.total;
}
for (let i = start; i < end; i++) {
dataList.push(arr[i]);
}
console.log(queryInfo);
}
//4、拼接页面数据
function renderData() {
getDataList();
let table = $("#table");
table.find("tr:not(:first)").remove();
dataList.forEach(function (item, index) {
let tr = `<tr>
<td>${index + 1}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.gender}</td>
<td></td>
</tr>`;
table.append(tr);
});
}
$(function () {
renderData();
$(".last-page").click(function () {
queryInfo.pageNum = Math.ceil(queryInfo.total / queryInfo.pageSize);
renderData();
$("#table").css("background", Arr[4]);
$(".btn").eq(4).css("background-color", "#c00000").css("color", "#ffffff");
$(".btn").eq(4).siblings().css("background-color", "#ffffff").css("color", "#000000");
});
$(".prev-page").click(function () {
queryInfo.pageNum--;
if (queryInfo.pageNum <= 0) {
queryInfo.pageNum = 1;
}
renderData();
$("#table").css("background", Arr[queryInfo.pageNum - 1]);
$(".btn")
.eq(queryInfo.pageNum - 1)
.css("background-color", "#c00000")
.css("color", "#ffffff");
$(".btn")
.eq(queryInfo.pageNum - 1)
.siblings()
.css("background-color", "#ffffff")
.css("color", "#000000");
});
$(".next-page").click(function () {
queryInfo.pageNum++;
let totalPages = Math.ceil(queryInfo.total / queryInfo.pageSize);
if (queryInfo.pageNum >= totalPages) {
queryInfo.pageNum = totalPages;
}
renderData();
$(".btn")
.eq(queryInfo.pageNum - 1)
.css("background-color", "#c00000")
.css("color", "#ffffff");
$(".btn")
.eq(queryInfo.pageNum - 1)
.siblings()
.css("background-color", "#ffffff")
.css("color", "#000000");
$("#table").css("background", Arr[queryInfo.pageNum - 1]);
});
$(".first-page").click(function () {
queryInfo.pageNum = 1;
renderData();
$("#table").css("background", Arr[0]);
$(".btn").eq(0).css("background-color", "#c00000").css("color", "#ffffff");
$(".btn").eq(0).siblings().css("background-color", "#ffffff").css("color", "#000000");
});
$(".btn").click(function () {
var index = $(this).index() - 1;
queryInfo.pageNum = index;
renderData();
$(this).css("background-color", "#c00000").css("color", "#ffffff");
$(this).siblings().css("background-color", "#ffffff").css("color", "#000000");
$("#table").css("background", Arr[index - 1]);
});
//输入框绑定失去焦点事件
$(".form-control").blur(function () {
//获取当前输入的值
var value = $(this).val();
console.log(value);
//判定值的范围是否符合
if (value < 0 || value > 5 || value == "") {
return false;
} else {
queryInfo.pageNum = value - 1;
renderData();
//对应的按钮处于激活状态
$(".btn")
.eq(value - 1)
.css("background-color", "#c00000")
.css("color", "#ffffff");
$(".btn")
.eq(value - 1)
.siblings()
.css("background-color", "#ffffff")
.css("color", "#000000");
}
$("#table").css("background", Arr[value - 1]);
});
//给输入框绑定键盘事件
$(".form-control").keydown(function (event) {
//当按下回车时
if (event.keyCode === 13) {
var value = $(this).val();
console.log(value);
if (value < 0 || value > 5 || value == "") {
alert("页码输入有误!");
return false;
}
queryInfo.pageNum = value;
renderData();
$(".btn")
.eq(value - 1)
.css("background-color", "#c00000")
.css("color", "#ffffff");
$(".btn")
.eq(value - 1)
.siblings()
.css("background-color", "#ffffff")
.css("color", "#000000");
}
$("#table").css("background", Arr[value - 1]);
});
});
效果图如下