本篇文章承接上篇文章,一个小例子,如果哪里有错,请多多指教!
<!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>
-----------------------------------------------关于html里面的json文件--------------------------------------------------------
[
{
"name":"张三",
"age":"19"
},
{
"name":"李四",
"age":"45"
},
{
"name":"王五",
"age":"35"
},
{
"name":"苏六",
"age":"22"
},
{
"name":"陈二",
"age":"29"
},
{
"name":"许弋",
"age":"19"
},
{
"name":"洛枳",
"age":"18"
},
{
"name":"盛淮南",
"age":"24"
},
{
"name":"程天佑",
"age":"30"
},
{
"name":"姜生",
"age":"18"
}
]