- <!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>
效果:
效果
来源: http://www.jianshu.com/p/6ab50916eaa6