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

最新推荐文章于 2025-05-15 10:36:54 发布
转载 最新推荐文章于 2025-05-15 10:36:54 发布 · 113 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yangkai-cn/archive/2012/11/16/4017352.html
文章标签：

#数据库 #测试 #java

本文介绍了MVC设计模式的基本概念及其在项目中的应用步骤，并通过实例讲解了Java Web开发中的分页技术实现方法。

简单说一下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>

转载于:https://www.cnblogs.com/yangkai-cn/archive/2012/11/16/4017352.html

分页显示的一个案例
lishirong_李世荣的专栏
12-02 536
主要是AJAX的综合应用，涉及到了数据库，XML，XSL，Javascript，html,servlet,jsp,css其中没有做好的是删除后的自动刷新，有待更正！起始页index.html小组管理系统var xmlHttp;var req_url;function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new Act
通用分页实例
JiangHu_Java的博客
05-19 476
通用分页案例 目录通用分页案例实现效果需要的jar包、工具类解析项目代码总结 实现效果 我只做了显示数据的通用分页效果： 需要的jar包、工具类 jar包需要c标签包，MySQL包（用的啥数据库导什么包）： 工具类（util），按顺序（连接数据库类、字符编码过滤类、做通用分页的类、连接数据库的配置文件）： 解析项目代码 dao方法中查询请求直接返回调用通用分页类的方法，传递这个对象的baseDao和SQL语句，还有实现的匿名内部类： package com.jiang.dao; import jav
分页实例-demo
06-01
分页demo
Java分页实例之－分页类
pengpenglin的专栏
10-16 4556
package com.dbtemplate.domain;import org.apache.log4j.Logger;/** *//** * The Class PageInfo. */public class PageInfo ...{    /** *//** The logger. */    static Logger logger = Logger.getLogger(PageI
分页案例
小白小白从不日别的博客
05-19 268
这个案例主要是为了模拟网页中我们经常见到的分页效果，在这里主要用到了Ajax以及PHP，当然还有数据库，这里我用的是MySql数据库，而且只是为了单纯的实现这个效果因此对于数据库的设计这块并没有去认真的设计，下面我们就直接看代码吧 <script src="js/jquery-1.12.3.min.js"></script> <style> .fenye span { border: 1px solid #ccc;
Vue.js实现无限加载与分页功能开发
01-19
与一些构建大型应用的高阶教程相比，又更专注于一些零碎细节的实现，方便读者快速掌握、致用。 需求分析 当一个页面中信息量过大时（例如一个新闻列表中有200条新闻需要展示），就会产生问题，例如： 》数据量过大，...
平时工作中常用的Python零碎知识总结，爬虫学习总结与练习目录监控，文件处理，Python数据分析学习总结源码
01-29
1、资源内容：平时工作中常用的Python零碎知识总结，爬虫学习总结与练习目录监控，文件处理，Python数据分析学习总结源码. 2、适用人群：计算机，电子信息工程、数学等专业的学习者，作为python参考资料学习借鉴使用...
平时工作中常用的Python零碎知识总结，爬虫学习总结与练习，Python数据分析学习总结，目前正在重新整理中…….zip
11-24
平时工作中常用的Python零碎知识总结，爬虫学习总结与练习，Python数据分析学习总结，目前正在重新整理中……分类 简介Python 基础 python常用小知识点，目录监控，文件处理，日志等......Python趋势 python网络编程...
Python零碎知识总结，爬虫学习总结与练习，Python数据分析学习总结，目前正在重新整理中.......zip
01-01
这个分享包涵了我开发的Python爬虫工具项目，主要用于合法爬取某些网页信息。以下是主要内容： 源代码：包括Python代码和相关脚本。这些代码展示了如何使用Python进行网页抓取、解析和数据提取。 项目文件：除了...
jquery分页,最简单分页,完整分页案例,50种分页样式
03-07
很好用的分页 jquery分页,最简单分页,完整分页案例,50种分页样式
10.分页案例
ycjcson的博客
01-02 149
10.分页案例 页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://www.java53.com/core" prefix="my"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit
分页查询综合案例
qq_33187235的博客
10-02 352
BeanUtils，分页，request获取封装数据，
通用分页的实例
Sugar_Harmonious的博客
08-29 314
一思维导图 二、后端 帮助类 DBHelper—数据库帮助类 package com.util.ty; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.Pro...
多种分页学习案例
kevin_cat的博客
06-03 143
分页案例3件套
JavaScript分页技术：10个实用代码案例解析
最新发布
weixin_32747681的博客
05-15 890
在Web开发中，良好的用户体验往往离不开精美的界面设计和流畅的交互体验。分页控件作为用户浏览大量数据时的界面组件，其样式和交互的自定义显得尤为重要。
下载小零碎音效WAV/MP3格式素材，助力学生与开发者
资源摘要信息: "小零碎音效.zip是一组包含了WAV格式或MP3格式的声音素材的压缩文件，可用于多种场合。该压缩文件中包含了多种音效素材，这些音效可以应用于学生的毕业设计、程序员开发项目以及小公司的项目开发中。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值