利用bootstrap进行分页

最新推荐文章于 2025-05-26 16:42:37 发布

原创最新推荐文章于 2025-05-26 16:42:37 发布 · 501 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用laypage插件和Ajax实现的动态数据分页案例。通过后台获取数据，并利用前端技术展示每页限定数量的数据项，同时具备跳页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数据分页</title>
</head>
<body>
<!--数据显示-->
<table class="table table-condensed" id="data_list" ></table>

<!--分页显示的容器-->
<div id="cont"></div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
<script src="laypage/laypage.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap-theme.min.css" />

<script>
var pagesize = 20;//每页的条数
var pages = 0;
var groups = 0;
ajaxPost(1,pagesize);
function ajaxPost (page,pagesize){
	$.ajax({
		url:'test.php',
		type:'POST', 
		data:{
			page:page,
			pagesize:pagesize
		},
		dataType:'json',
		success:function(data){
		    //进行数据处理
			if(data.code == 0){
			    var str = '<tr><th>测试</th><th>测试</th></tr>';
			    var totalPage = Math.ceil(data.data.totalnum / pagesize);
				if(totalPage < 5){
					groups = totalPage;
				}else{
				    groups = 5;
				}
				for( var i = 0; i < data.data.items.length; i++){
					str += "<tr><td>"+data.data.items[i]['uid']+"</td><td>" +data.data.items[i]['uid']+"</td></tr>";
				}
				$("#data_list").html(str);
			    //调用分页
				laypage({
					cont: 'cont',
					pages: totalPage,
					skip: true, //是否开启跳页
					skin: '#molv',
					groups: groups, //连续显示分页数
					curr: page, 
					jump: function(obj,first){
						if(!first){
							ajaxPost(obj.curr,pagesize);
						}
					}
				})
			}
		},
		error:function(){	  
		},
	})
}
</script>
</body>
</html>