<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<style>
table {
margin: 10px auto;
/*边框合并为一行*/
border-collapse: collapse;
border: 1px solid #E8E8E8;
}
table th,
td {
padding: 10px;
}
.pageStyle {
display: inline-block;
text-decoration: none;
font-size: 14px;
padding: 0 30px;
font-family: AppleSystemUIFont;
color: #606266;
letter-spacing: 0;
line-height: 14px;
}
.pageStyle.active {
color: #47C6DB;
cursor: pointer;
}
.page {
text-align: center;
margin: 62px auto;
}
.left_right {
display: inline-block;
width: 6.7px;
height: 11.3px;
padding: 0 10px;
}
.left_right:hover {
cursor: pointer;
}
.pre_black {
background: url("./2.png") no-repeat;
}
.pre_gray {
background: url("./1.png") no-repeat;
}
.next_black {
background: url("./2.png") no-repeat;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.next_gray {
background: url("./1.png") no-repeat;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<table class="message_table product_message" border="1" cellspacing="0">
<thead>
<tr class="table_header">
<th class="one">产品类别</th>
<th class="two">名称</th>
<th class="three">描述</th>
</tr>
</thead>
<tbody id="J_TbData"></tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var data = [
[
"水果",
"苹果",
"非常甜"
],
[
"水果",
"香蕉",
"软糯可口"
],
[
"水果",
"火龙果",
"甜甜的，软软的"
],
[
"水果",
"梨",
"鲜嫩多汁"
],
[
"水果",
"西瓜",
"又大又甜"
],
[
"饮料",
"可乐",
"黑色的液体"
],
[
"饮料",
"雪碧",
"白色的液体"
],
[
"饮料",
"柠檬茶",
"黄色的液体"
],
[
"蔬菜",
"黄瓜",
"脆生生"
],
[
"蔬菜",
"西蓝花",
"绿色的菜花"
],
[
"水果",
"苹果",
"非常甜"
],
[
"水果",
"香蕉",
"软糯可口"
],
[
"水果",
"火龙果",
"甜甜的，软软的"
],
[
"水果",
"梨",
"鲜嫩多汁"
],
[
"水果",
"西瓜",
"又大又甜"
],
[
"饮料",
"可乐",
"黑色的液体"
],
[
"饮料",
"雪碧",
"白色的液体"
],
[
"饮料",
"柠檬茶",
"黄色的液体"
],
[
"蔬菜",
"黄瓜",
"脆生生"
],
[
"蔬菜",
"西蓝花",
"绿色的菜花"
]
]
window.onload = function() {
// 动态渲染table
$("#J_TbData").empty();
for (var i = 0; i < data.length; i++) {
//动态创建一个tr行标签,并且转换成jQuery对象
var $trTemp = $("<tr class='table_body'></tr>");
$trTemp.append("<td>" + data[i][0] + "</td>");
$trTemp.append("<td>" + data[i][1] + "</td>");
$trTemp.append("<td>" + data[i][2] + "</td>");
$trTemp.appendTo("#J_TbData");
}
// 分页
var $table = $('.product_message');
var currentPage = 0; //当前页默认值为0
var pageSize = 4; //每一页显示的数目
$table.bind('paging', function() {
$table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
});
var sumRows = $table.find('#J_TbData tr').length; // 总数据
var sumPages = Math.ceil(sumRows / pageSize); //总页数
var $pager = $('<div class="page"></div>'); //新建div，放入a标签,显示底部分页码
var pre = $('<span class="pre left_right pre_gray"></span>')
var next = $('<span class="next left_right next_black"></span>')
var next1 = $('<span class="next left_right next_gray"></span>')
for (var pageIndex = 0; pageIndex < sumPages; pageIndex++) {
$('<a href="#" class="pageStyle">' +
'<span class="no">' + (pageIndex + 1) + '</span>' +
'</a>')
.bind("click", { "newPage": pageIndex }, function(event) {
currentPage = event.data["newPage"];
$table.trigger("paging");
//触发分页函数
}).appendTo($pager);
if (sumPages === 1) { // 如果只有一页数据，左右都是灰色
$pager.append(next1).prepend(pre);
} else { // 如果有多页数据，左边是灰色，右边是黑色
$pager.append(next).prepend(pre);
}
}
$pager.insertAfter($table);
$table.trigger("paging");
// 给点击的页数添加蓝色
$('.pageStyle').each(function() {
$('.pageStyle').eq(0).addClass("active")
$(this).click(function() {
$(this).addClass("active").siblings().removeClass("active");
})
})
// 向前点击
$(".pre").click(function(event) {
if (currentPage > 0) {
currentPage -= 1
$table.trigger("paging");
$('.pageStyle').eq(currentPage).addClass("active").siblings().removeClass("active")
$(".next").removeClass("next_gray").addClass("next_black")
$(".pre").removeClass("pre_gray").addClass("pre_black")
if (currentPage === 0) {
$(".pre").removeClass("pre_black").addClass("pre_gray")
$(".next").removeClass("next_gray").addClass("next_black")
}
}
})
// 点击后一条
$(".next").click(function(event) {
if (currentPage < sumPages - 1) {
currentPage += 1
$table.trigger("paging");
$('.pageStyle').eq(currentPage).addClass("active").siblings().removeClass("active")
$(".next").removeClass("next_gray").addClass("next_black")
$(".pre").removeClass("pre_gray").addClass("pre_black")
if (currentPage === (sumPages - 1)) {
$(".next").removeClass("next_black").addClass("next_gray")
$(".pre").removeClass("pre_gray").addClass("pre_black")
}
}
})
// 直接点击第几页，对应的next和pre颜色的变化
$(".pageStyle").click(function(event) {
if (currentPage >= 1 && currentPage < (sumPages - 1)) { // 在中间
$(".pre").removeClass("pre_gray").addClass("pre_black")
$(".next").removeClass("next_gray").addClass("next_black")
} else if (currentPage === (sumPages - 1)) { // 最后一页
$(".next").removeClass("next_black").addClass("next_gray")
$(".pre").removeClass("pre_gray").addClass("pre_black")
} else { // 在第一页
$(".pre").removeClass("pre_black").addClass("pre_gray")
$(".next").removeClass("next_gray").addClass("next_black")
}
})
}
</script>
</body>
</html>
效果：
效果
网友评论