利用bootstrap3的分页样式和jq实现分页功能
作者：互联网
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>
View Code
思路：
利用事件绑定来使页面显示我们要显示的
标签：index,12,分页,age,jq,name,phone,10086,bootstrap3 来源： https://www.cnblogs.com/Zxq-zn/p/11798465.html