实现JSP页面隔行换色
首先需要:
两个jar包
直接上代码:
<%--<%@ page import="com.util.PageSupport" %>--%> <%--<%@ page import="com.dao.BaseDao" %>--%> <%--<%@ page import="com.pojo.Commodity" %>--%> <%--<%@ page import="com.service.impl.CommodityServiceImpl" %>--%> <%@ page import="java.util.List" %> <%@ page import="Dao.NewsDaoImpl" %> <%@ page import="Dao.NewsDao" %> <%@ page import="Dao.PageSupport" %> <%@ page import="pojo.News" %><%-- Created by IntelliJ IDEA. User: zengt Date: 2019-09-28 Time: 11:38 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <html> <head> <style> .abc{ background-color: red; } </style> <title>Title</title> <script> // 提交表单，传递页码 function page_nav(frm,num) { frm.pageIndex.value = num; frm.submit(); } // 页码跳转，跳转前验证 function jump_to(frm,pageno) { // 正则验证，只能是数字 var regexp=/^[1-9]\d*$/; var totalPage = document.getElementById("totalPage").value; if(!regexp.test(pageno)){ alert("请输入 正确的数字！"); return false; }else if((pageno-totalPage) > 0){ alert("总页码一共"+totalPage+"页，请输入正确的页码！"); return false; }else{ page_nav(frm,pageno); } } </script> </head> <body> <form action="#" name="frm" class="frm" id="frm" method="post" > <table border="1"> <tr> <th>ID</th> <th>姓名</th> </tr> <% String currentPage = request.getParameter("pageIndex"); String pagenum = request.getParameter("pagenum"); int pageIndex=0; if (currentPage == null||currentPage=="") { // 首次进入 currentPage = "1"; }else{ pageIndex = Integer.parseInt(currentPage); } NewsDao newsDao = new NewsDaoImpl(); //当前页码 // 获取新闻总数量 int totalCount = newsDao.getCount(); //每页显示几条新闻，页面容量 int pageSize = 10; // 获取总页数d int totalPage = PageSupport.setTotalPageCountByRs(totalCount,pageSize); // 判断页码 if (pageIndex <= 0) { pageIndex = 1; } else if (pageIndex > totalPage) { pageIndex = totalPage; } List<News> newsList = new NewsDaoImpl().getLimit(pageIndex, pageSize); int i = 0; for (News news : newsList) { i++; request.setAttribute("news",news); pageContext.setAttribute("i",i); %> <tr <c:if test="${i%2==0}">class="abc"</c:if>> <td><a href=''>${news.id} </a></td> <td>${news.name} </td> </tr> <%} %> </table> <div class="page-bar"> <ul class="page-num-ul clearfix"> <li>共<%=i%>条记录 <%=pageIndex%>/<%=totalPage%>页</li> <input type="hidden" id="pageIndex" name="pageIndex" value="<%=pageIndex%>"> <input type="hidden" id="totalPage" name="totalPage" value="<%=totalPage%>"> <%-- <a href="adsf.jsp?pageIndex=<%=pageIndex-1%>">上一页</a>--%> <%-- <a href="adsf.jsp?pageIndex=<%=pageIndex+1%>">下一页</a> --%> <a href="javaScript:page_nav(document.forms[0],1)">首页</a> <a href="javaScript:page_nav(document.forms[0],<%=pageIndex-1%>)">上一页</a> <a href="javaScript:page_nav(document.forms[0],<%=pageIndex+1%>)">下一页</a> <a href="javaScript:page_nav(document.forms[0],<%=totalPage%>)">最后一页</a> 跳转至 <input type="number" name="inputPage" id="inputPage" class="page-key" size="5" />页 <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button> </ul> </div> </form> </body> </html>
PageSupport类的代码:
package Dao; public class PageSupport { /** * 计算总页数 * @param totalCount 数据总条数 * @param pageSize 页面容量 * @return */ public static int setTotalPageCountByRs(int totalCount,int pageSize ) { int totalPageCount = 0; if (totalCount % pageSize == 0) { totalPageCount = totalCount / pageSize; } else if (totalCount % pageSize > 0) { totalPageCount = totalCount / pageSize + 1; } return totalPageCount; } }
