您的位置：首页 > Web前端 > BootStrap

结合Bootstrap 的 jquery.twbsPagination.js动态页码分页

2018-09-18 21:37 495 查看

1、引入js文件jquery.twbsPagination.js

<script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script>

2、html里面添加类应用bootstrap的样式

<div class="text-center">
<div id="content"></div>
<ul id="pagination-demo" class="sync-pagination pagination-lg"></ul>
</div>

3、关于js的配置选项

$('.sync-pagination').twbsPagination({
totalPages: 20,
onPageClick: function (evt, page) {
$('#content').text('Page ' + page);
}
});

结合ajax 的 demo应用：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.twbsPagination.js"></script>
</head>
<body>

<div class="con">
<div class="content"></div>
<!--	bootstrap类pagination-sm-->
<ul class="oPage pagination-sm"></ul>
</div>

<script type="text/javascript">
$.ajax({

type:'get',
url:'js/page.json',
dataType:'json',
data:{},
success:function(data){
init('pagination',5,10);
},
error:function(){
alert("出错啦！");
}
});
function init(id,count,num){
$('.oPage').twbsPagination({
totalPages: num,//总页数
startPage: 1,
visiblePages:count,//显示的页数
first: '首页',
prev: '前一页',
next: '下一页',
last: '尾页',
//点击请求数据
onPageClick:function(event,page){
console.log(page);//page为当前页码
$.ajax({
type:"get",
url:"js/page.json",
async:true,
success:function(data){
$('.content').append('<li></li>').addClass('page');
$.each(data, function(index,item) {
$('.page').text(data[page].name);
});
}
});
}
})
}

</script>
</body>
</html>

json文件

[
{
"name":"张三",
"age":"19"
},
{
"name":"李四",
"age":"45"
}
]
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航