• 通用分页02（前端）

    今天所要讲的是关于前端的通用分页

    目录

    一、改造pagebean

    二、分页查询

    一、改造pagebean

    所需条件：

            ①需要新增变量保存上一次查询条件；

            ②需要新增变量保存上一次请求地址；比如：http://localhost:8080/t280_page/book/search

            ③需要添加方法：获取最大页的页码；

            ④需要添加方法：获取下一页的页码；

            ⑤需要添加方法：获取上一页的页码；

            ⑥需要增加方法：初始化pagebean。

    PageBean类：

    1. package com.ycx.util;
    2.  
    3. import java.util.HashMap;
    4. import java.util.Map;
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7.  
    8. /**
    9.  * 分页工具类
    10.  *
    11.  */
    12. public class PageBean {
    13.  
    14. 	private int page = 1;// 页码
    15.  
    16. 	private int rows = 10;// 页大小
    17.  
    18. 	private int total = 0;// 总记录数
    19.  
    20. 	private boolean pagination = true;// 是否分页
    21. 	
    22. //	 需要新增变量保存上一次请求地址；比如：http://localhost:8080/t280_page/book/search
    23. 	private String url;
    24. 	
    25. //	 需要新增变量保存上一次查询条件
    26. 	private Map<String,String[]> parameterMap = new HashMap<>();
    27.  
    28. //	 需要添加方法：获取最大页的页码
    29. 	public int maxPage() {
    30. 		return this.total % this.rows == 0 ?
    31. 				this.total / this.rows
    32. 				: this.total / this.rows+1;
    33. 	}
    34.  
    35. //	 需要添加方法：获取上一页的页码；
    36. 	public int previousPage() {
    37. 		return this.page > 1 ? this.page-1 : this.page;
    38. 	}
    39.  
    40. 	
    41. //	 需要添加方法：获取下一页的页码	
    42. 	public int nextPage() {
    43. 		return this.page < this.maxPage()?
    44. 				this.page+1:this.page;
    45. 	}
    46.  
    47. //	 需要增加方法：初始化pagebean
    48. 	public void setRequest(HttpServletRequest req) {
    49. 		this.setPage(req.getParameter("page"));
    50. 		this.setRows(req.getParameter("rows"));
    51. 		this.setPagination(req.getParameter("pagination"));
    52. 		this.setUrl(req.getRequestURI().toString());
    53. 		this.setParameterMap(req.getParameterMap());
    54. 	}
    55. 	
    56. 	private void setPagination(String pagination) {
    57. 		if(StringUtils.isNotBlank(pagination)) {
    58. 			this.setPagination(!"false".equals(pagination));
    59. 		}
    60. 	
    61. }
    62.  
    63. 	private void setRows(String rows) {
    64. 		if(StringUtils.isNotBlank(rows)) {
    65. 			this.setRows(Integer.valueOf(rows));
    66. 		}
    67. }
    68.  
    69. 	public void setPage(String page) {
    70. 		if(StringUtils.isNotBlank(page)) {
    71. 	//		set自动生成的方法
    72. 			this.setPage(Integer.valueOf(page));
    73. 		}
    74. 	}
    75.  
    76. 	
    77. 	
    78. 	public String getUrl() {
    79. 		return url;
    80. 	}
    81.  
    82. 	public void setUrl(String url) {
    83. 		this.url = url;
    84. 	}
    85.  
    86. 	public Map<String, String[]> getParameterMap() {
    87. 		return parameterMap;
    88. 	}
    89.  
    90. 	public void setParameterMap(Map<String, String[]> parameterMap) {
    91. 		this.parameterMap = parameterMap;
    92. 	}
    93.  
    94. 	public PageBean() {
    95. 		super();
    96. 	}
    97.  
    98. 	public int getPage() {
    99. 		return page;
    100. 	}
    101.  
    102. 	public void setPage(int page) {
    103. 		this.page = page;
    104. 	}
    105.  
    106. 	public int getRows() {
    107. 		return rows;
    108. 	}
    109.  
    110. 	public void setRows(int rows) {
    111. 		this.rows = rows;
    112. 	}
    113.  
    114. 	public int getTotal() {
    115. 		return total;
    116. 	}
    117.  
    118. 	public void setTotal(int total) {
    119. 		this.total = total;
    120. 	}
    121.  
    122. 	public void setTotal(String total) {
    123. 		this.total = Integer.parseInt(total);
    124. 	}
    125.  
    126. 	public boolean isPagination() {
    127. 		return pagination;
    128. 	}
    129.  
    130. 	public void setPagination(boolean pagination) {
    131. 		this.pagination = pagination;
    132. 	}
    133.  
    134. 	/**
    135. 	 * 获得起始记录的下标
    136. 	 * 
    137. 	 * @return
    138. 	 */
    139. 	public int getStartIndex() {
    140. 		return (this.page - 1) * this.rows;
    141. 	}
    142.  
    143. 	@Override
    144. 	public String toString() {
    145. 		return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination
    146. 				+ ", url=" + url + ", parameterMap=" + parameterMap + "]";
    147. 	}
    148.  
    149. 	
    150. }

    然后新建一个 BookServlet :

    1. package com.ycx.web;
    2.  
    3. import java.io.IOException;
    4. import java.util.Map;
    5.  
    6. import javax.jws.WebService;
    7. import javax.servlet.ServletException;
    8. import javax.servlet.annotation.WebServlet;
    9. import javax.servlet.http.HttpServlet;
    10. import javax.servlet.http.HttpServletRequest;
    11. import javax.servlet.http.HttpServletResponse;
    12.  
    13. import com.ycx.util.PageBean;
    14.  
    15. @WebServlet("/book/search")
    16. public class BookServlet extends HttpServlet{
    17. 	@Override
    18. 	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    19. 		doPost(req, resp);
    20. 	}
    21. 	
    22. 	@Override
    23. 	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    24.  
    25. 		PageBean pageBean=new PageBean();
    26. 		pageBean.setRequest(req);
    27. 	
    28. 		req.setAttribute("pagebean", pageBean);
    29. 		req.getRequestDispatcher("/bookList.jsp").forward(req, resp);
    30. 	
    31. 	
    32. 	}
    33. }

    bookList.jsp代码：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    4. <html>
    5. <head>
    6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. <title>Insert title here</title>
    8. </head>
    9. <body>
    10. ${pagebean }
    11. </body>
    12. </html>

     运行结果：

     然后使用debug查看：

    二、分页查询

    接着我们以一个书籍列表为案例：

    bookList.jsp代码：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    4. <html>
    5. <head>
    6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    7. <link
    8. 	href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
    9. 	rel="stylesheet">
    10. <script
    11. 	src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
    12. <title>书籍列表</title>
    13. <style type="text/css">
    14. .page-item input {
    15. 	padding: 0;
    16. 	width: 40px;
    17. 	height: 100%;
    18. 	text-align: center;
    19. 	margin: 0 6px;
    20. }
    21.  
    22. .page-item input, .page-item b {
    23. 	line-height: 38px;
    24. 	float: left;
    25. 	font-weight: 400;
    26. }
    27.  
    28. .page-item.go-input {
    29. 	margin: 0 10px;
    30. }
    31. </style>
    32. </head>
    33. <body>
    34. 	<form class="form-inline"
    35. 		action="${pageContext.request.contextPath }/book.action" method="post">
    36. 		<div class="form-group mb-2">
    37. 			<input type="text" class="form-control-plaintext" name="bname"
    38. 				placeholder="请输入书籍名称">
    39. 		</div>
    40. 		<button type="submit" class="btn btn-primary mb-2">查询</button>
    41. 	</form>
    42.  
    43. 	<table class="table table-striped ">
    44. 		<thead>
    45. 			<tr>
    46. 				<th scope="col">书籍ID</th>
    47. 				<th scope="col">书籍名</th>
    48. 				<th scope="col">价格</th>
    49. 			</tr>
    50. 		</thead>
    51. 		<tbody>
    52. 			<tr>
    53. 				<td>1</td>
    54. 				<td>圣墟第1章</td>
    55. 				<td>1</td>
    56. 			</tr>
    57. 			<tr>
    58. 				<td>1</td>
    59. 				<td>圣墟第1章</td>
    60. 				<td>1</td>
    61. 			</tr>
    62.  
    63. 		</tbody>
    64. 	</table>
    65. 	
    66. 	
    67.  
    68. </body>
    69. </html>

     目前我们的页面效果是这样的，数据暂时都是定死的，并且无法查看上一页、下一页、尾页：

    前端首先要显示界面，自己建一个tag标签包（PageTag），然后通过上节课学得知识自定义标签来写一个page标签，最后在index界面中直接写出自己定义的标签就行。

    接下来要给它新建一个PageTag类：

    1. package com.ycx.tag;
    2.  
    3. import java.util.Map;
    4. import java.util.Map.Entry;
    5. import java.util.Set;
    6.  
    7.  
    8. import com.ycx.util.PageBean;
    9.  
    10. import javax.servlet.jsp.JspException;
    11. import javax.servlet.jsp.JspWriter;
    12. import javax.servlet.jsp.tagext.BodyTagSupport;
    13.  
    14. public class PageTag extends BodyTagSupport{
    15. 	private PageBean pageBean;
    16. 	
    17. 	public PageBean getPageBean() {
    18. 		return pageBean;
    19. 	}
    20.  
    21. 	public void setPageBean(PageBean pageBean) {
    22. 		this.pageBean = pageBean;
    23. 	}
    24.  
    25. 	
    26. 	
    27. 	
    28. 	@Override
    29. 	public int doStartTag() throws JspException {
    30. 		JspWriter out = pageContext.getOut();
    31. 		try {
    32. 			out.print(toHTML());
    33. 		} catch (Exception e) {
    34. 			// TODO Auto-generated catch block
    35. 			e.printStackTrace();
    36. 		}
    37. 		return super.doStartTag();
    38. 	}
    39.  
    40. 	private String toHTML() {
    41. 		StringBuffer sb=new StringBuffer();
    42. //		隐藏的form表单，作用保存上一次查询条件
    43. 		sb.append("<form action='"+pageBean.getUrl()+"' id='pageBeanForm' method='post'>");
    44. 		sb.append("	<input type='hidden' name='page' value=''>");
    45. 		Map<String, String[]> parameterMap = pageBean.getParameterMap();
    46. 		if(parameterMap != null && parameterMap.size() > 0) {
    47. 			Set<Entry<String, String[]>> entrySet = parameterMap.entrySet();
    48. 			for (Entry<String, String[]> entry : entrySet) {
    49. 				String key = entry.getKey();// name/likes/page/rows
    50. 				String[] values = entry.getValue();
    51. 				if(!"page".equals(key)) {
    52. 					for (String value : values) {
    53. 						sb.append("	<input type='hidden' name='"+key+"' value='"+value+"'>");
    54. 					}
    55. 				}
    56. 			}
    57. 		}
    58. 		sb.append("</form>");
    59. 		
    60. //		分页条
    61. 		sb.append("<ul class='pagination justify-content-center'>");
    62. 		sb.append("	<li class='page-item "+(pageBean.getPage() == 1 ? "disabled" : "")+"'><a class='page-link'");
    63. 		sb.append("		href='javascript:gotoPage(1)'>首页</a></li>");
    64. 		sb.append("	<li class='page-item "+(pageBean.getPage() == 1 ? "disabled" : "")+"'><a class='page-link'");
    65. 		sb.append("		href='javascript:gotoPage("+pageBean.previousPage()+")'>&lt;</a></li>");
    66. 		sb.append("	<li class='page-item active'><a class='page-link' href='#'>"+pageBean.getPage()+"</a></li>");
    67. 		sb.append("	<li class='page-item "+(pageBean.getPage() == pageBean.maxPage() ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage("+pageBean.nextPage()+")'>&gt;</a></li>");
    68. 		sb.append("	<li class='page-item "+(pageBean.getPage() == pageBean.maxPage() ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage("+pageBean.maxPage()+")'>尾页</a></li>");
    69. 		sb.append("	<li class='page-item go-input'><b>到第</b><input class='page-link'");
    70. 		sb.append("		type='text' id='skipPage' name='' /><b>页</b></li>");
    71. 		sb.append("	<li class='page-item go'><a class='page-link'");
    72. 		sb.append("		href='javascript:skipPage()'>确定</a></li>");
    73. 		sb.append("	<li class='page-item'><b>共"+pageBean.getTotal()+"条</b></li>");
    74. 		sb.append("</ul>");
    75. 		
    76. //		分页js代码
    77. 		sb.append("<script type='text/javascript'>");
    78. 		sb.append("	function gotoPage(page) {");
    79. 		sb.append("		document.getElementById('pageBeanForm').page.value = page;");
    80. 		sb.append("		document.getElementById('pageBeanForm').submit();");
    81. 		sb.append("	}");
    82. 		sb.append("	function skipPage() {");
    83. 		sb.append("		var page = document.getElementById('skipPage').value;");
    84. 		sb.append("		if (!page || isNaN(page) || parseInt(page) < 1");
    85. 		sb.append("				|| parseInt(page) > "+pageBean.maxPage()+") {");
    86. 		sb.append("				alert('请输入1~"+pageBean.maxPage()+"的数字');");
    87. 		sb.append("			return;");
    88. 		sb.append("		}");
    89. 		sb.append("		gotoPage(page);");
    90. 		sb.append("	}");
    91. 		sb.append("</script>");
    92. 		
    93. 		
    94. 		return sb.toString();
    95. 	}
    96. }

    继承 BodyTagSupport类，用stringbuffer中的append方法来实现页面展示效果。

    最后在index中写好    <y:page></y:page>即可。

    看ycx.tld代码：

    1. <?xml version="1.0" encoding="UTF-8" ?>
    2.  
    3. <taglib xmlns="http://java.sun.com/xml/ns/j2ee"
    4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    5.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
    6.     version="2.0">
    7.     
    8.   <description>JSTL 1.1 core library</description>
    9.   <display-name>JSTL core</display-name>
    10.   <tlib-version>1.1</tlib-version>
    11.   <short-name>y</short-name>
    12.   <uri>http://ycx.com</uri>
    13.  
    14.   <validator>
    15.     <description>
    16.         Provides core validation features for JSTL tags.
    17.     </description>
    18.     <validator-class>
    19.         org.apache.taglibs.standard.tlv.JstlCoreTLV
    20.     </validator-class>
    21.   </validator>
    22.   
    23. 	<tag>
    24.   <name>page</name>
    25.   
    26.     <tag-class>com.ycx.tag.PageTag</tag-class>
    27.     
    28.     <body-content>JSP</body-content>
    29.    <attribute> 
    30.    
    31.         <name>pageBean</name>
    32.        
    33.         <required>true</required>
    34.        
    35.         <rtexprvalue>true</rtexprvalue>
    36.     </attribute> 
    37.   </tag>
    38.  
    39. </taglib>

     分页得核心思想：当点击下一页时，有许多参数是不变的，比如像名字，行数，以及总页数，但是其中有一个参数要变，那就是page（页数）

    优化PageBean代码：

    1. package com.ycx.util;
    2.  
    3. import java.util.HashMap;
    4. import java.util.Map;
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7.  
    8. /**
    9.  * 分页工具类
    10.  *
    11.  */
    12. public class PageBean {
    13.  
    14. 	private int page = 1;// 页码
    15.  
    16. 	private int rows = 10;// 页大小
    17.  
    18. 	private int total = 0;// 总记录数
    19.  
    20. 	private boolean pagination = true;// 是否分页
    21. 	
    22. //	 需要新增变量保存上一次请求地址；比如：http://localhost:8080/t280_page/book/search
    23. 	private String url;
    24. 	
    25. //	 需要新增变量保存上一次查询条件
    26. 	private Map<String,String[]> parameterMap = new HashMap<>();
    27.  
    28. //	 需要添加方法：获取最大页的页码
    29. 	public int maxPage() {
    30. 		return this.total % this.rows == 0 ?
    31. 				this.total / this.rows
    32. 				: this.total / this.rows+1;
    33. 	}
    34.  
    35. //	 需要添加方法：获取上一页的页码；
    36. 	public int previousPage() {
    37. 		return this.page > 1 ? this.page-1 : this.page;
    38. 	}
    39.  
    40. 	
    41. //	 需要添加方法：获取下一页的页码	
    42. 	public int nextPage() {
    43. 		return this.page < this.maxPage()?
    44. 				this.page+1:this.page;
    45. 	}
    46.  
    47. //	 需要增加方法：初始化pagebean
    48. 	public void setRequest(HttpServletRequest req) {
    49. 		this.setPage(req.getParameter("page"));
    50. 		this.setRows(req.getParameter("rows"));
    51. 		this.setPagination(req.getParameter("pagination"));
    52. 		this.setUrl(req.getRequestURI().toString());
    53. 		this.setParameterMap(req.getParameterMap());
    54. 	}
    55. 	
    56. 	private void setPagination(String pagination) {
    57. 		if(StringUtils.isNotBlank(pagination)) {
    58. 			this.setPagination(!"false".equals(pagination));
    59. 		}
    60. 	
    61. }
    62.  
    63. 	private void setRows(String rows) {
    64. 		if(StringUtils.isNotBlank(rows)) {
    65. 			this.setRows(Integer.valueOf(rows));
    66. 		}
    67. }
    68.  
    69. 	public void setPage(String page) {
    70. 		if(StringUtils.isNotBlank(page)) {
    71. 	//		set自动生成的方法
    72. 			this.setPage(Integer.valueOf(page));
    73. 		}
    74. 	}
    75.  
    76. 	
    77. 	
    78. 	public String getUrl() {
    79. 		return url;
    80. 	}
    81.  
    82. 	public void setUrl(String url) {
    83. 		this.url = url;
    84. 	}
    85.  
    86. 	public Map<String, String[]> getParameterMap() {
    87. 		return parameterMap;
    88. 	}
    89.  
    90. 	public void setParameterMap(Map<String, String[]> parameterMap) {
    91. 		this.parameterMap = parameterMap;
    92. 	}
    93.  
    94. 	public PageBean() {
    95. 		super();
    96. 	}
    97.  
    98. 	public int getPage() {
    99. 		return page;
    100. 	}
    101.  
    102. 	public void setPage(int page) {
    103. 		this.page = page;
    104. 	}
    105.  
    106. 	public int getRows() {
    107. 		return rows;
    108. 	}
    109.  
    110. 	public void setRows(int rows) {
    111. 		this.rows = rows;
    112. 	}
    113.  
    114. 	public int getTotal() {
    115. 		return total;
    116. 	}
    117.  
    118. 	public void setTotal(int total) {
    119. 		this.total = total;
    120. 	}
    121.  
    122. 	public void setTotal(String total) {
    123. 		this.total = Integer.parseInt(total);
    124. 	}
    125.  
    126. 	public boolean isPagination() {
    127. 		return pagination;
    128. 	}
    129.  
    130. 	public void setPagination(boolean pagination) {
    131. 		this.pagination = pagination;
    132. 	}
    133.  
    134. 	/**
    135. 	 * 获得起始记录的下标
    136. 	 * 
    137. 	 * @return
    138. 	 */
    139. 	public int getStartIndex() {
    140. 		return (this.page - 1) * this.rows;
    141. 	}
    142.  
    143. 	@Override
    144. 	public String toString() {
    145. 		return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination
    146. 				+ ", url=" + url + ", parameterMap=" + parameterMap + "]";
    147. 	}
    148.  
    149. 	
    150. }

    紧接着在bookList.jsp内导入我的y标签和c标签：

    1. 	<%@taglib uri="http://ycx.com" prefix="y" %>
    2. 	<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

     接着写一个BookServlet:

    1. package com.ycx.web;
    2.  
    3. import java.io.IOException;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import javax.jws.WebService;
    8. import javax.servlet.ServletException;
    9. import javax.servlet.annotation.WebServlet;
    10. import javax.servlet.http.HttpServlet;
    11. import javax.servlet.http.HttpServletRequest;
    12. import javax.servlet.http.HttpServletResponse;
    13.  
    14. import com.ycx.dao.BookDao;
    15. import com.ycx.entity.Book;
    16. import com.ycx.util.PageBean;
    17.  
    18. @WebServlet("/book/search")
    19. public class BookServlet extends HttpServlet{
    20. 	@Override
    21. 	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    22. 		doPost(req, resp);
    23. 	}
    24. 	
    25. 	@Override
    26. 	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    27. //		req.getParameter("name");
    28. //		req.getParameterValues("likes");
    29. 		<input name="aa" value="">
    30. //		Map<String, String[]> parameterMap = req.getParameterMap();//name
    31. //	
    32. 		PageBean pageBean=new PageBean();
    33. 		pageBean.setRequest(req);
    34. 		BookDao bookDao=new BookDao();
    35. 		Book book=new Book();
    36. 		book.setBname(req.getParameter("bname"));
    37. 		try {
    38. 			List<Book> books = bookDao.list2(book, pageBean);
    39. 			req.setAttribute("books", books);
    40. 		} catch (Exception e) {
    41. 			// TODO Auto-generated catch block
    42. 			e.printStackTrace();
    43. 		}
    44. 		
    45. 		req.setAttribute("pagebean", pageBean);
    46. 		req.getRequestDispatcher("/bookList.jsp").forward(req, resp);
    47. 	
    48. 	
    49. 	}
    50. }

    再利用c:forEach标签把数据遍历出来，展示在页面上去，

    bookList.jsp代码：

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. 	<%@taglib uri="http://ycx.com" prefix="y" %>
    4. 	<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    6. <html>
    7. <head>
    8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    9. <link
    10. 	href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
    11. 	rel="stylesheet">
    12. <script
    13. 	src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
    14. <title>书籍列表</title>
    15. <style type="text/css">
    16. .page-item input {
    17. 	padding: 0;
    18. 	width: 40px;
    19. 	height: 100%;
    20. 	text-align: center;
    21. 	margin: 0 6px;
    22. }
    23.  
    24. .page-item input, .page-item b {
    25. 	line-height: 38px;
    26. 	float: left;
    27. 	font-weight: 400;
    28. }
    29.  
    30. .page-item.go-input {
    31. 	margin: 0 10px;
    32. }
    33. </style>
    34. </head>
    35. <body>
    36. 	<form class="form-inline"
    37. 		action="${pageContext.request.contextPath }/book/search" method="post">
    38. 		<div class="form-group mb-2">
    39. 			<input type="text" class="form-control-plaintext" name="bname"
    40. 				placeholder="请输入书籍名称">
    41. 		</div>
    42. 		<button type="submit" class="btn btn-primary mb-2">查询</button>
    43. 	</form>
    44.  
    45. 	<table class="table table-striped ">
    46. 		<thead>
    47. 			<tr>
    48. 				<th scope="col">书籍ID</th>
    49. 				<th scope="col">书籍名</th>
    50. 				<th scope="col">价格</th>
    51. 			</tr>
    52. 		</thead>
    53. 		<tbody>
    54. 			<c:forEach items="${books }" var="b">
    55. 			<tr>
    56. 				<td>${b.bid }</td>
    57. 				<td>${b.bname }</td>
    58. 				<td>${b.price }</td>
    59. 			</tr>
    60. 			</c:forEach>
    61. 		</tbody>
    62. 	</table>
    63. 	
    64. 	<y:page pageBean="${pagebean }"></y:page>
    65. 	
    66.  
    67. </body>
    68. </html>

    运行效果如下：

     但是我们还面临一个问题，就是搜索时乱码，

    比如搜索“圣墟”，如下图所示：

     搜索出来是乱码的情况。

    那么我们就要去解决，我们需在EncodingFiter类里面去处理：

    1. package com.ycx.util;
    2.  
    3. import java.io.IOException;
    4. import java.util.Iterator;
    5. import java.util.Map;
    6. import java.util.Set;
    7.  
    8. import javax.servlet.Filter;
    9. import javax.servlet.FilterChain;
    10. import javax.servlet.FilterConfig;
    11. import javax.servlet.ServletException;
    12. import javax.servlet.ServletRequest;
    13. import javax.servlet.ServletResponse;
    14. import javax.servlet.annotation.WebFilter;
    15. import javax.servlet.http.HttpServletRequest;
    16. import javax.servlet.http.HttpServletResponse;
    17.  
    18. /**
    19.  * 中文乱码处理
    20.  * 
    21.  */
    22. @WebFilter("/book/*")
    23. public class EncodingFiter implements Filter {
    24.  
    25. 	private String encoding = "UTF-8";// 默认字符集
    26.  
    27. 	public EncodingFiter() {
    28. 		super();
    29. 	}
    30.  
    31. 	public void destroy() {
    32. 	}
    33.  
    34. 	public void doFilter(ServletRequest request, ServletResponse response,
    35. 			FilterChain chain) throws IOException, ServletException {
    36. 		HttpServletRequest req = (HttpServletRequest) request;
    37. 		HttpServletResponse res = (HttpServletResponse) response;
    38.  
    39. 		// 中文处理必须放到 chain.doFilter(request, response)方法前面
    40. 		res.setContentType("text/html;charset=" + this.encoding);
    41. 		if (req.getMethod().equalsIgnoreCase("post")) {
    42. 			req.setCharacterEncoding(this.encoding);
    43. 		} else {
    44. 			Map map = req.getParameterMap();// 保存所有参数名=参数值(数组)的Map集合
    45. 			Set set = map.keySet();// 取出所有参数名
    46. 			Iterator it = set.iterator();
    47. 			while (it.hasNext()) {
    48. 				String name = (String) it.next();
    49. 				String[] values = (String[]) map.get(name);// 取出参数值[注：参数值为一个数组]
    50. 				for (int i = 0; i < values.length; i++) {
    51. 					values[i] = new String(values[i].getBytes("ISO-8859-1"),
    52. 							this.encoding);
    53. 				}
    54. 			}
    55. 		}
    56.  
    57. 		chain.doFilter(request, response);
    58. 	}
    59.  
    60. 	public void init(FilterConfig filterConfig) throws ServletException {
    61. 		String s = filterConfig.getInitParameter("encoding");// 读取web.xml文件中配置的字符集
    62. 		if (null != s && !s.trim().equals("")) {
    63. 			this.encoding = s.trim();
    64. 		}
    65. 	}
    66.  
    67. }

    我们再去用DeBug测试，搜索“圣墟”:

     就解决了~

                                                                    首页：

    尾页： 

     总结：通用分页把它简单化就分成前端和后台，其中公用的写到一个类里面就能减少代码量和大量时间，要抓住核心思想，这样才能事半功倍！我们下期再见叭~

  • 相关阅读:
    vue中使用echarts渐变柱状图 Cannot read properties of undefined (reading ‘graphic‘)解决方法
    Android 10 分区存储
    为控制器生成OpenAPI注释
    IPD流程概要
    麻了，别再为难软件测试员了
    Android打造专有hook，让不规范的代码扼杀在萌芽之中
    【JS】实现 Promise 的并发数控制
    9 网关的作用
    Redis原理
    回收站永久删除了如何恢复正常？
  • 原文地址：https://blog.csdn.net/weixin_65808248/article/details/125414711