查询:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% String[] columns = request.getParameter("columns").split("\|"); String column = request.getParameter("column"); String keyword = request.getParameter("keyword"); String pageSize = request.getParameter("pageSize"); String url = request.getParameter("url"); %> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'emp_search.jsp' starting page</title> </head> <body> key word to search: <select id="clumunName"> <% for(String col : columns) { %> <option value="<%=col%>" <%=column.equals(col)==true?"selected":"" %>><%=col %></option> <% } %> </select>=<input type="text" id="kw" name="kw" value="<%=keyword %>" /> <button onclick="gotoPage(1,<%=pageSize %>,'<%=url %>')">Search</button> </body> </html>
分页代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <% Integer[] pageSizeArray = new Integer[] { 1, 3, 5, 10, 20 }; %> <% Integer currentPage = Integer.parseInt(request.getParameter("cp")); Integer totalPage = Integer.parseInt(request.getParameter("tp")); Integer pageSize = Integer.parseInt(request.getParameter("ps")); String url = request.getParameter("url"); %> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'emp_foot.jsp' starting page</title> </head> <body> <p id="page"> <% if(currentPage == 1) { %> <a onclick="return false')" class="disabled">First Page</a> <% } else { %> <a onclick="gotoPage(1,<%=pageSize%>,'<%=url%>')" class="n">First Page</a> <% } %> <% if(currentPage == 1) { %> <a onclick="return false')" class="disabled" >Previous Page</a> <% } else { %> <a onclick="gotoPage(<%=currentPage - 1%>,<%=pageSize%>,'<%=url%>')" class="n">Previous Page</a> <% } %> <% if (totalPage <= 5) { for (int i = 1; i <= totalPage; i++) { if (i == currentPage) { %> <strong><span class="fk fk_cur"></span><span class="pc"><%=i%></span></strong> <% } else { %> <a onclick="gotoPage(<%=i%>,<%=pageSize%>,'<%=url%>')"><span class="fk"></span><span class="pc"><%=i%></span></a> <% } } } else { if ((currentPage - 2) >= 1 && (currentPage + 2) <= totalPage) { int startPage = currentPage - 2; int endPage = currentPage + 2; //将currentPage放到最中间 for (int i = startPage; i <= endPage; i++) { if (i == currentPage) { %> <strong><span class="fk fk_cur"></span><span class="pc"><%=i%></span></strong> <% } else { %> <a onclick="gotoPage(<%=i%>,<%=pageSize%>,'<%=url%>')"><span class="fk"></span><span class="pc"><%=i%></span></a> <% } } } else if ((currentPage - 2) < 1) { int startPage = 1; int endPage = 5; for (int i = startPage; i <= endPage; i++) { if (i == currentPage) { %> <strong><span class="fk fk_cur"></span><span class="pc"><%=i%></span></strong> <% } else { %> <a onclick="gotoPage(<%=i%>,<%=pageSize%>,'<%=url%>')"><span class="fk"></span><span class="pc"><%=i%></span></a> <% } } } else if ((currentPage + 2) > totalPage) { int startPage = totalPage - 4; int endPage = totalPage; for (int i = startPage; i <= totalPage; i++) { if (i == currentPage) { %> <strong><span class="fk fk_cur"></span><span class="pc"><%=i%></span></strong> <% } else { %> <a onclick="gotoPage(<%=i%>,<%=pageSize%>,'<%=url%>')"><span class="fk"></span><span class="pc"><%=i%></span></a> <% } } } } %> <% if(currentPage == totalPage) { %> <a onclick="return false')" class="disabled" >Next Page</a> <% } else { %> <a onclick="gotoPage(<%=currentPage + 1%>,<%=pageSize%>,'<%=url%>')" class="n">Next Page</a> <% } %> <% if(currentPage == totalPage) { %> <a onclick="return false')" class="disabled" >Last Page</a> <% } else { %> <a onclick="gotoPage(<%=totalPage%>,<%=pageSize%>,'<%=url%>')" class="n">Last Page</a> <% } %> <select onchange="gotoPage(1,this.value,'<%=url%>')"> <% for (Integer i : pageSizeArray) { %> <option <%=pageSize == i ? "selected" : ""%> value=<%=i%>><%=i%></option> <% } %> </select> records each page go to: <select onchange="gotoPage(this.value,<%=pageSize%>,'<%=url%>')"> <% for (int i = 1; i <= totalPage; i++) { %> <option value="<%=i%>" <%=currentPage == i ? "selected" : ""%>><%=i%></option> <% } %> </select> </p> <br /> </body> </html>
对应的CSS
#page { FONT: 14px simsun; WHITE-SPACE: nowrap } #page A { TEXT-ALIGN: center; LINE-HEIGHT: 22px; DISPLAY: inline-block; BACKGROUND: white; HEIGHT: 54px; VERTICAL-ALIGN: text-bottom; OVERFLOW: hidden; MARGIN-RIGHT: 5px; TEXT-DECORATION: none } #page STRONG { TEXT-ALIGN: center; LINE-HEIGHT: 22px; DISPLAY: inline-block; BACKGROUND: white; HEIGHT: 54px; VERTICAL-ALIGN: text-bottom; OVERFLOW: hidden; MARGIN-RIGHT: 5px; TEXT-DECORATION: none } #page A { CURSOR: pointer } #page A:hover { BACKGROUND: 0px 50% } #page .n:hover { BACKGROUND: #ebebeb } #page A:hover .pc { BACKGROUND: #ebebeb } #page .n { BORDER-BOTTOM: #e7ecf0 1px solid; BORDER-LEFT: #e7ecf0 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 6px; PADDING-RIGHT: 6px; HEIGHT: 22px; BORDER-TOP: #e7ecf0 1px solid; BORDER-RIGHT: #e7ecf0 1px solid; PADDING-TOP: 0px } #page SPAN { DISPLAY: block } #page .pc { BORDER-BOTTOM: #e7ecf0 1px solid; BORDER-LEFT: #e7ecf0 1px solid; WIDTH: 22px; HEIGHT: 22px; BORDER-TOP: #e7ecf0 1px solid; CURSOR: pointer; BORDER-RIGHT: #e7ecf0 1px solid } #page .fk { WIDTH: 24px; BACKGROUND: url(http://s1.bdstatic.com/r/www/cache/global/img/bg-1.0.4.png) no-repeat -35px -309px; HEIGHT: 30px; CURSOR: pointer } #page STRONG .fk { CURSOR: auto } #page STRONG .pc { CURSOR: auto } #page .fkd { BACKGROUND-POSITION: -35px -303px } #page .fk_cur { BACKGROUND-POSITION: 2px -312px } #page STRONG .pc { LINE-HEIGHT: 24px; BORDER-RIGHT-WIDTH: 0px; WIDTH: 24px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 24px; BORDER-LEFT-WIDTH: 0px } #page .nums { DISPLAY: inline-block; VERTICAL-ALIGN: text-bottom } #page .disabled { BORDER-BOTTOM: #e7ecf0 1px solid; BORDER-LEFT: #e7ecf0 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 6px; PADDING-RIGHT: 6px; HEIGHT: 22px; BORDER-TOP: #e7ecf0 1px solid; BORDER-RIGHT: #e7ecf0 1px solid; PADDING-TOP: 0px; BACKGROUND: #ebebeb } #page .disabled:hover { BACKGROUND: #ebebeb }
对应的JS
function gotoPage(currentPage,pageSize,url) { var columnName = ""; var keyword = ""; try { columnName = document.getElementById('clumunName').value; keyword = document.getElementById('kw').value; } catch(exception) { columnName = ""; keyword = "" ; } window.location = url+"?cp="+currentPage+"&ps="+pageSize+"&col="+columnName+"&kw="+keyword; }