jquery和ZUI分页器的实例
<!DOCTYPE html>
<html>
<head>
<title>ZUI分页器示例</title>
<link rel="stylesheet" type="text/css" href="path/to/zui.min.css">
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/zui.min.js"></script>
</head>
<body>
<!-- 分页器容器 -->
<div id="pagination" class="pull-right"></div>
<script type="text/javascript">
$(function() {
var totalPage = 10; // 假设总页数为10
$('#pagination').pagination({
currentPage: 1, // 当前页面
totalPage: totalPage, // 总页数
callback: function(current) {
// 回调函数,当用户点击分页按钮时被调用
// current 参数表示用户希望查看的页码
console.log('当前页:', current);
// 这里可以实现获取数据的逻辑,例如Ajax请求
}
});
});
</script>
</body>
</html>
这个代码实例展示了如何使用jQuery和ZUI创建一个基本的分页器。在这个例子中,我们假设总共有10页数据,并且在用户点击分页按钮时,会在控制台输出当前的页码。在实际应用中,你需要替换path/to/zui.min.css
和path/to/zui.min.js
为正确的路径,并实现Ajax请求来获取对应页码的数据。
评论已关闭