现在的位置: 首页 > 综合 > 正文

这周零碎总结与js实现分页案例

2013年12月10日 ⁄ 综合 ⁄ 共 5266字 ⁄ 字号 小 中 大 ⁄ 评论关闭

简单说一下MVC设计模式的认识及基本步骤：

      首先要建对应的数据库，然后由对数据库的操作转换为对类对象的操作，这是需要一个java bean，这时候就到了分析MVC结构的身上了，MVC设计模式中，M代表模型即javaBean，V代表显示器实际开发中的jsp，C是控制器，用servlet编写。MVC设计模式编程需要几个重要包来存放相应的类，分别是：dao（接口）、daoImp(dao实现类)这两个是数据库打交道的包，dao层也叫数据层；service（接口）、serviceImp（service实现类）这个是与业务操作相关的包，service层也叫服务层；util，工具包，放相应的工具类，最常见的是存放连接数据库的类；damain或叫bean包，存放上面一直说的javabean即实体类，是数据库中某一行数值所对应的java类；junit，测试类，可以在这里建daoImp类中的增删改查操作的测试类，也可以建util包测试数据库连接类；还有最重要的servlet包，也可以起名为web.controller.

    这里体会最深的是分页技术，因为是第一次接触，最重要的是感觉这个技术不错，实用价值极高，主要思想我总结是：jsp显示、servlet控制、daoImp实现；daoImp实现中的代码跟查找所以的相关操作基本一样，主要区别是这里的失去了语句用到了select *（实际开发中建议不用*，这里为了方便） from user limit ？ ？；还要创建一个对应的计算总列数的方法getCount（）。

    Js加强方面，就是用js实现的分页技术，这种分页与上面说的分页技术有着本质的区别；js中主要设置了各种function（）方法。难处在于获取输入框中的值，然后有获取到的值动态的创建对应的table表，并且设置超过多少条以后分页显示，这种连接到一块比较难实现。一个简单例子（只说分页）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>js分页技术</title>
	</head>
	<body>
		<table width="500" border="0" cellpadding="5" cellspacing="1"
			bgcolor="#999999">
			<tbody id="table2">
				<tr>
					<td bgcolor="#FFFFFF">
						1
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						2
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						3
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						4
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						5
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						6
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						7
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						8
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						9
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						10
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
				<tr>
					<td bgcolor="#FFFFFF">
						11
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
					<td bgcolor="#FFFFFF">
						 
					</td>
				</tr>
			</tbody>
		</table>
		<span id="spanFirst">第一页</span>
		<span id="spanPre">上一页</span>
		<span id="spanNext">下一页</span>
		<span id="spanLast">最后一页</span> 第
		<span id="spanPageNum"></span>页/共
		<span id="spanTotalPage"></span>页
	</body>
</html>
<script>
	var theTable = document.getElementById("table2");
	var totalPage = document.getElementById("spanTotalPage");
	var pageNum = document.getElementById("spanPageNum");
	var spanPre = document.getElementById("spanPre");
	var spanNext = document.getElementById("spanNext");
	var spanFirst = document.getElementById("spanFirst");
	var spanLast = document.getElementById("spanLast");
	var numberRowsInTable = theTable.rows.length;
	var pageSize = 3;
	var page = 1;
	//下一页
	function next() {
		hideTable();
		currentRow = pageSize * page;
		maxRow = currentRow + pageSize;
		if (maxRow > numberRowsInTable)
			maxRow = numberRowsInTable;
		for ( var i = currentRow; i < maxRow; i++) {
			theTable.rows[i].style.display = '';
		}
		page++;
		if (maxRow == numberRowsInTable) {
			nextText();
			lastText();
		}
		showPage();
		preLink();
		firstLink();
	}
	//上一页
	function pre() {
		hideTable();
		page--;
		currentRow = pageSize * page;
		maxRow = currentRow - pageSize;
		if (currentRow > numberRowsInTable)
			currentRow = numberRowsInTable;
		for ( var i = maxRow; i < currentRow; i++) {
			theTable.rows[i].style.display = '';
		}
		if (maxRow == 0) {
			preText();
			firstText();
		}
		showPage();
		nextLink();
		lastLink();
	}
	//第一页
	function first() {
		hideTable();
		page = 1;
		for ( var i = 0; i < pageSize; i++) {
			theTable.rows[i].style.display = '';
		}
		showPage();
		preText();
		nextLink();
		lastLink();
	}
	//最后一页
	function last() {
		hideTable();
		page = pageCount();
		currentRow = pageSize * (page - 1);
		for ( var i = currentRow; i < numberRowsInTable; i++) {
			theTable.rows[i].style.display = '';
		}
		showPage();
		preLink();
		nextText();
		firstLink();
	}
	function hideTable() {
		for ( var i = 0; i < numberRowsInTable; i++) {
			theTable.rows[i].style.display = 'none';
		}
	}
	function showPage() {
		pageNum.innerHTML = page;
	}
	//总共页数
	function pageCount() {
		var count = 0;
		if (numberRowsInTable % pageSize != 0)
			count = 1;
		return parseInt(numberRowsInTable / pageSize) + count;
	}

	//显示链接
	function preLink() {
		spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
	}
	function preText() {
		spanPre.innerHTML = "上一页";
	}
	function nextLink() {
		spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
	}
	function nextText() {
		spanNext.innerHTML = "下一页";
	}
	function firstLink() {
		spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>";
	}
	function firstText() {
		spanFirst.innerHTML = "第一页";
	}
	function lastLink() {
		spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>";
	}
	function lastText() {
		spanLast.innerHTML = "最后一页";
	}
	//隐藏表格
	function hide() {
		for ( var i = pageSize; i < numberRowsInTable; i++) {
			theTable.rows[i].style.display = 'none';
		}
		totalPage.innerHTML = pageCount();
		pageNum.innerHTML = '1';
		nextLink();
		lastLink();
	}
	hide();
</script>

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞