PageView与数据库 分页
<?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.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="><span>已开通课程</span></a></li><li><a href="javascript:buycourse(1,1)"><span>购买课程</span></a></li><li class="null"><ahref="cp.php?ac=paycard&amp;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>
页:
[1]