<!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. = 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>效果：
效果
作者：椰果粒
链接：https://www.jianshu.com/p/6ab50916eaa6
随时随地看视频
