标签：ice set none previous page lan alt next round
1源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body> <table class="table table-hover" id="pageShow"> <tr> <th>name</th> <th>age</th> <th>phone</th> </tr> </table> <nav aria-label="Page navigation"> <ul class="pagination" id="page"> <li class="prePage"> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> </ul> </nav> <script> $(function(){ var data = [ //模拟的假数据 {name:‘1‘,age:12,phone:10086}, {name:‘2‘,age:12,phone:10086}, {name:‘3‘,age:12,phone:10086}, {name:‘4‘,age:12,phone:10086}, {name:‘5‘,age:12,phone:10086}, {name:‘6‘,age:12,phone:10086}, {name:‘7‘,age:12,phone:10086}, {name:‘8‘,age:12,phone:10086}, {name:‘9‘,age:12,phone:10086}, {name:‘10‘,age:12,phone:10086}, {name:‘11‘,age:12,phone:10086}, {name:‘12‘,age:12,phone:10086}, {name:‘13‘,age:12,phone:10086}, {name:‘14‘,age:12,phone:10086}, {name:‘15‘,age:12,phone:10086}, {name:‘16‘,age:12,phone:10086}, {name:‘17‘,age:12,phone:10086}, {name:‘18‘,age:12,phone:10086}, {name:‘19‘,age:12,phone:10086}, ]; var pageSize = 5;//每页的条数 var totalPage = Math.ceil(data.length/pageSize);//总页数 var currentPage;//当前页数 var startData;//开始的数据 var endData;//结尾的数 for(let i=1;i<=totalPage;i++){ $(‘#page‘).append(‘<li class="page-item"><a href="#">‘+i+‘</a></li>‘); } $(‘#page‘).append( `<li class="nextPage"> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li>`); function pageination(i){ currentPage = i; console.log(‘第‘+currentPage+‘页...‘); startData = (currentPage-1)*pageSize; endData = currentPage*pageSize - 1; if(endData>data.length){ endData = data.length; } $(‘.tr-item‘).remove();//移除列表显示的数据 for(let i=startData;i<endData;i++){//添加列表显示的数据 $(‘#pageShow‘).append(‘<tr class="tr-item">‘+ ‘<td>‘+data[i].name+‘</td>‘+ ‘<td>‘+data[i].age+‘</td>‘+ ‘<td>‘+data[i].phone+‘</td>‘+ ‘</tr>‘) } } //初始化 $(‘.page-item‘).eq(0).addClass(‘active‘); pageination(1); //对每个页数的点击事件的绑定 $(‘.page-item‘).on(‘click‘,function(){ let index = $(this).index();//获取点击的页数 $(this).addClass(‘active‘).siblings().removeClass(‘active‘); pageination(index); }) //向前按钮事件绑定 $(‘.prePage‘).click(function(){ $(‘.page-item‘).find(function(){ let index = $(‘.active‘).index() - 1; if(index <1){ index = 1; } $(‘.page-item‘).eq(index-1).addClass(‘active‘).siblings().removeClass(‘active‘); pageination(index); }) }) //向后按钮事件绑定 $(‘.nextPage‘).click(function(){ $(‘.page-item‘).find(function(){ let index = $(‘.active‘).index() + 1; if(index >totalPage){ index = totalPage; } $(‘.page-item‘).eq(index-1).addClass(‘active‘).siblings().removeClass(‘active‘); pageination(index); }) }) }) </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
思路：
利用事件绑定来使页面显示我们要显示的
标签：ice set none previous page lan alt next round
原文地址：https://www.cnblogs.com/Zxq-zn/p/11798465.html
