这周零碎总结与js实现分页案例
简单说一下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>