twbsPagination分页插件

最新推荐文章于 2024-06-23 09:36:42 发布

千缪

最新推荐文章于 2024-06-23 09:36:42 发布

阅读量5.7k

点赞数 1

分类专栏：插件类应用文章标签： bootstrap 分页插件

本文链接：https://blog.csdn.net/lixiaohuan1/article/details/55510775

版权

插件类应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本篇文章承接上篇文章，一个小例子，如果哪里有错，请多多指教！

<!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"
}

]