<?xml version="1.0" encoding="UTF-8" ?>
<%@page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/inc/incTagLib.jsp"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href=<%=basePath%>>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: tahoma, arial;
background: #fff;
}
.PagerView {
color: #333;
text-align: center;
margin: 8px;
}
.PagerView span {
color: #999;
margin: 0 1px;
padding: 3px 6px;
border: 1px solid #ccc;
}
.PagerView span.on {
color: #333;
font-weight: bold;
border: 1px solid #333;
}
.PagerView a {
color: #00f;
text-decoration: none;
}
.PagerView a span {
border: 1px solid #66c;
color: #33f;
}
.PagerView a:hover span {
color: #f00;
background: #ff9;
}
</style>
<script type="text/javascript" src="/e/js/admincp/jquery.min.js"></script>
<script type="text/javascript">
/**
*
* 分页控件, 使用原生的JavaScript代码编写. 重写onclick方法, 获取翻页事件,
* 可用来向服务器端发起AJAX请求.
*
* 示例:
* HTML:
* <div id="pager"></div>
*
* JavaScript:
* var pager = new PagerView('pager');
* pager.index = 3; // 当前是第3页
* pager.size = 16; // 每页显示16条记录
* pager.itemCount = 100; // 一共有100条记录
*
* pager.onclick = function(index){
* alert('click on page: ' + index);
* // display data...
* pager.render();
* };
*
* pager.render();
*
* @param id: HTML节点的id属性值, 控件将显示在该节点中. 可以延迟到render方法调用之前设置.
*/
function PagerView(id) {
var self = this;
this.id = id;
this.container = null;
this.index = 1; // 当前页码, 从1开始
this.size = 15; // 每页显示记录数
this.maxButtons = 9; // 显示的分页按钮数量
this.itemCount = 0; // 记录总数
this.pageCount = 0; // 总页数
/**
* 控件使用者重写本方法, 获取翻页事件, 可用来向服务器端发起AJAX请求.
* @param index: 被点击的页码.
*/
this.onclick = function(index) {
alert(index);
buycourse(1, 20, index);
};
/**
* 内部方法.
*/
this._onclick = function(index) {
self.index = index;
self.onclick(index);
self.render();
};
/**
* 在显示之前计算各种页码变量的值.
*/
this.calculate = function() {
alert("this.itemCount"+this.itemCount);
self.pageCount = parseInt(Math.ceil(self.itemCount / self.size));
self.index = parseInt(self.index);
if (self.index > self.pageCount) {
self.index = self.pageCount;
}
};
/**
* 渲染分页控件.
*/
this.render = function() {
if (self.id != undefined) {
var div = document.getElementById(self.id);
div.view = self;
self.container = div;
}
self.calculate();
var start, end;
start = Math.max(1, self.index - parseInt(self.maxButtons / 2));
end = Math.min(self.pageCount, start + self.maxButtons - 1);
start = Math.max(1, end - self.maxButtons + 1);
var str = "";
str += "<div class=\"PagerView\">\n";
if (self.pageCount > 1) {
if (self.index != 1) {
str += '<a href="javascript://1"><span>|<</span></a>';
str += '<a href="javascript://' + (self.index - 1)
+ '"><span><<</span></a>';
} else {
str += '<span>|<</span>';
str += '<span><<</span>';
}
}
for ( var i = start; i <= end; i++) {
if (i == this.index) {
str += '<span class="on">' + i + "</span>";
} else {
str += '<a href="javascript://' + i + '"><span>' + i
+ "</span></a>";
}
}
if (self.pageCount > 1) {
if (self.index != self.pageCount) {
str += '<a href="javascript://' + (self.index + 1)
+ '"><span>>></span></a>';
str += '<a href="javascript://' + self.pageCount + '"><span>>|</span></a>';
} else {
str += '<span>>></span>';
str += '<span>>|</span>';
}
}
str += ' 一共' + self.pageCount + '页, ' + self.itemCount + '条记录 ';
str += "</div><!-- /.pagerView -->\n";
self.container.innerHTML = str;
var a_list = self.container.getElementsByTagName('a');
for ( var i = 0; i < a_list.length; i++) {
a_list[i].onclick = function() {
var index = this.getAttribute('href');
if (index != undefined && index != '') {
index = parseInt(index.replace('javascript://', ''));
self._onclick(index)
}
return false;
};
}
};
}
</script>
<SCRIPT type="text/javascript">
$(document).ready(buycourse(1, 20, 1));
function buycourse(uid, rows, page) {
$.ajax({
url : "/s/ajaxStudentCourse.action?uid=" + uid
+ "&rows=" + rows + "&page=" + page + "",
type : "POST",
dataType : "json",
success : function(data) {
$
.each(
data.listTree,
function(i, value) {
var isOpen = "";
var operate = "";
if (value.IsBuyed == false) {
isOpen = "未开通";
operate = "<a href='/e/s/opencourse.action?cid="
+ value.cs.cid
+ "&uid=1&type=1&adminid=1'>开通</a>";
} else {
isOpen = "已开通";
operate = "<a href='/e/s/closecourse.action?cid="
+ value.cs.cid
+ "&uid=1&type=1&adminid=1'>关闭</a>";
}
$("#ajaxCourse")
.append(
"<tr><td>"
+ value.cs.cname
+ "</td><td>"
+ value.cs.price
+ "</td><td>"
+ isOpen
+ "</td><td>"
+ operate
+ "</td>");
});
$
.each(
data.listTree,
function(i, value) {
var isOpen = "";
var operate = "";
if (value.IsRemedied == false) {
isOpen = "未开通";
operate = "<a href='/e/s/openremedial.action?cid="
+ value.cs.cid
+ "&uid=1&type=2&adminid=1'>开通</a>";
} else {
isOpen = "已开通";
// operate = "<a href='/e/s/closeremedial.action?cid="
// + value.cs.cid
// + "&uid=1&type=2&adminid=1'>关闭</a>";
operate = "<a href='javascript:opencourse("
+ value.cs.cid
+ ",1,2);'>关闭</a>";
}
// javascript:opencourse() ajaxgetlist
$("#ajaxRemedy")
.append(
"<tr><td>"
+ value.cs.cname
+ "</td><td>"
+ value.cs.price
+ "</td><td>"
+ isOpen
+ "</td><td>"
+ "<input maxlength='4' size='6' id='lessonnum"+value.cs.cid+"' name='lessonnum[]' />"
+ "</td><td>"
+ operate
+ "</td>");
});
},
error : function() {
alert("失败");
}
});
}
</SCRIPT>
</head>
<body>
<s:include value="../../inc/stdspacetop.jsp"></s:include>
<!-- 结束 -->
<div id="wrap">
<s:include value="../../inc/app_siderbar.jsp"></s:include>
<div id="mainarea">
<h2 class="title">
<img src="images/app/1.gif">网络课堂
</h2>
<div class="tabs_header">
<ul class="tabs">
<li class="active"><a href="s/viewMyCourse.action?uid="
onclick="document.getElementById('ajaxCourse').style.display='none';document.getElementById('feed_div').style.display='';"><span>已开通课程</span>
</a></li>
<li><a href="javascript:buycourse(1,1)"
onclick="document.getElementById('feed_div').style.display='none';document.getElementById('ajaxCourse').style.display='';"><span>购买课程</span>
</a></li>
<li class="null"><a
href="cp.php?ac=paycard&refersource=course">我要充卡</a></li>
</ul>
</div>
<div>
<TABLE width="100%" border="0" align="center"
cellpadding="0" bgcolor="#E9F2FC" cellspacing="1">
<tr>
<td width="50%" height="20">课程名称</td>
<td width="10%">价格</td>
<td width="30%">课程说明</td>
<td width="10%">操作</td>
</tr>
</TABLE>
<TABLE id="ajaxCourse" width="100%" border="0" align="center"
cellpadding="0" bgcolor="#E9F2FC" cellspacing="1">
</TABLE>
<div id="pager"
style="width: 900px; margin: 20px; padding: 4px; border: 1px solid #999;">
</div>
<div id="info"
style="text-align: center; width: 900px; margin: 0 20px; padding: 4px; border: 1px solid #999;">
</div>
<script type="text/javascript">
$(document).ready($.get("/e/s/itemCount.action",function(data){
alert(data.itemCount);
// alert( parseInt(data));
var pager = new PagerView('pager');
pager.itemCount = data.itemCount;
pager.size = 5;
pager.onclick = function(index) {
document.getElementById('ajaxCourse').innerHTML = "";
buycourse(1, 20, index);
document.getElementById('info').innerHTML = '现在翻到第'
+ index + '页';
};
pager.render();
}));
</script>
</div>
</div>
</div>
</body>
<s:debug></s:debug>
</html>
本文介绍了一个使用原生JavaScript编写的自定义分页控件。该控件支持基本的翻页操作，并通过AJAX请求来更新页面内容。文章还提供了一个具体的使用示例，展示了如何初始化控件并配置其参数。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
