web分页页码组件pager之介绍和使用详情
目录
1、引入相关的文件，引入jquery-1.7.1.js，pager.js，pager.css。
3、编写javascript代码，这段代码可以控制分页的加载事件。
一、pager之介绍
pager是jquery的其中一个分页页码组件，用来控制桌面显示分页的页码，页码的点击事件。
二、pager使用详情
1、引入相关的文件，引入jquery-1.7.1.js，pager.js，pager.css。
jquery的下载地址：https://download.csdn.net/download/mengtianqq/10676984
pager下载地址：https://download.csdn.net/download/mengtianqq/10676969
<script src="${ctx}/js/jquery-1.7.1.js"></script>
<script src="${ctx}/www/js/pager.js"></script>
<link rel="stylesheet" href="${ctx}/www/css/common_ie8.css">
<link rel="stylesheet" href="${ctx}/www/css/pager.css" />2、编写html代码。
<div >
<div class="pagealign">
<ul class="pagination" id="page1">
</ul>
</div>
</div>
3、编写javascript代码，这段代码可以控制分页的加载事件。
<script type="text/javascript">
function getInfoList(n){
alert("第 " +n+" 页加载...");
Page({
elem : $('#page1'),
num:5,
startnum:n,
callback:function(n) {
getInfoList(n);}
});
}
getInfoList(1);
</script>4、总的页面代码显示：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="${ctx}/js/jquery-1.7.1.js"></script>
<script src="${ctx}/www/js/pager.js"></script>
<link rel="stylesheet" href="${ctx}/www/css/common_ie8.css">
<link rel="stylesheet" href="${ctx}/www/css/pager.css" />
</head>
<body >
<div >
<div class="pagealign">
<ul class="pagination" id="page1">
</ul>
</div>
</div>
</body>
<script type="text/javascript">
function getInfoList(n){
alert("第 " +n+" 页加载...");
Page({
elem : $('#page1'),
num:5,
startnum:n,
callback:function(n) {
getInfoList(n);}
});
}
getInfoList(1);
</script>
</html>5、效果如下：
点击下一页效果如下：
72
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
