markdown 分页排序搜索文章

蔚落 2022-09-25 10:24 230阅读 0赞

##     ##

# markdown 分页 排序 搜索文章 #

[markdown 操作文章][markdown]  ：[http://blog.csdn.net/qq\_19558705/article/details/52171181][markdown]

[markdown 发表文章][markdown 1]： [http://blog.csdn.net/qq\_19558705/article/details/52121321][markdown 1]

[markdown 页面编辑器][markdown 2]： [http://blog.csdn.net/qq\_19558705/article/details/51993884][markdown 2]  
  
markdown 文字标签：[http://blog.csdn.net/qq\_19558705/article/details/52265947][http_blog.csdn.net_qq_19558705_article_details_52265947]

个人主页：[http://www.itit123.cn/][http_www.itit123.cn] 更多干货等你来拿

注\* ：这是一系列博客，若有看不懂的内容，可以看前面的博客了解。

今天谈谈文章的分页，排序，搜索功能。用的是spring Data jpa。先看效果图（比较简陋），每次都在需找合适的界面，一共四条数据，一页三条数据。

![20160819155159704][]

![20160819155207626][]

![20160819155215848][]

![20160819155230224][]

![20160819155238943][]

这是spring data jpa 相关教程：[http://blog.csdn.net/qq\_19558705/article/details/50413254][http_blog.csdn.net_qq_19558705_article_details_50413254]

dao层代码：

public interface BlogDao extends PagingAndSortingRepository<Blog, Long>,
    	JpaSpecificationExecutor<Blog>{
    }

service层代码：

public Page<Blog> getBlog(Map<String, Object> searchParams, int pageNumber, int pageSize,
    			String sortType) {
    		PageRequest pageRequest = buildPageRequest(pageNumber, pageSize, sortType);
    		Specification<Blog> spec = buildSpecification(searchParams);
    
    		return blogDao.findAll(spec, pageRequest);
    	}
    
    	/**
    	 * 创建分页请求.
    	 */
    	private PageRequest buildPageRequest(int pageNumber, int pagzSize, String sortType) {
    		Sort sort = null;
    		if ("auto".equals(sortType)) {
    			sort = new Sort(Direction.DESC, "id");
    		} else if ("title".equals(sortType)) {
    			sort = new Sort(Direction.ASC, "title");
    		} else if ("createDate".equals(sortType)) {
    			sort = new Sort(Direction.ASC, "createDate");
    		}
    
    		return new PageRequest(pageNumber - 1, pagzSize, sort);
    	}
    	
    	/**
    	 * 创建动态查询条件组合.
    	 */
    	private Specification<Blog> buildSpecification(Map<String, Object> searchParams) {
    		Map<String, SearchFilter> filters = SearchFilter.parse(searchParams);
    		filters.put("isDelete", new SearchFilter("isDelete", Operator.EQ, 0));
    		Specification<Blog> spec = DynamicSpecifications.bySearchFilter(filters.values(), Blog.class);
    		return spec;
    	}

controller层代码：

private static final String PAGE_SIZE = "3";
    	private static Map<String, String> sortTypes = Maps.newLinkedHashMap();
    	static {
    		sortTypes.put("auto", "自动");
    		sortTypes.put("title", "标题");
    		sortTypes.put("createdDate", "创建时间");
    	}
    	
    	@RequestMapping(value="list" ,method = RequestMethod.GET)
    	public String execute(@RequestParam(value = "page", defaultValue = "1") int pageNumber,
    			@RequestParam(value = "page.size", defaultValue = PAGE_SIZE) int pageSize,
    			@RequestParam(value = "sortType", defaultValue = "auto") String sortType, 
    			Model model,ServletRequest request){
    		Map<String, Object> searchParams = Servlets.getParametersStartingWith(request, "search_");
    		Page<Blog> blogs = blogService.getBlog(searchParams, pageNumber, pageSize, sortType);
    
    		model.addAttribute("blogs", blogs);
    		model.addAttribute("sortType", sortType);
    		model.addAttribute("sortTypes", sortTypes);
    		// 将搜索条件编码成字符串，用于排序，分页的URL
    		model.addAttribute("searchParams", Servlets.encodeParameterStringWithPrefix(searchParams, "search_"));
    		return "blog/listing";
    	}

前端页面代码：

<div class="container">
    	<c:if test="${not empty message}">
    		<div id="message" class="alert alert-success alert-dismissable"><button data-dismiss="alert" class="close">×</button>${message}</div>
    	</c:if>
    	<c:if test="${not empty messageError}">
    		<div id="message-error" class="alert alert-danger alert-dismissable"><button data-dismiss="alert" class="close">×</button>${messageError}</div>
    	</c:if>
    	<div class="row">
    		<div class="span4 offset7">
    			<form class="form-search" action="#">
    				
    				<label>标题：</label> <input type="text" name="search_LIKE_title" class="input-medium" value="${param.search_LIKE_title}"> 
    				<button type="submit" class="btn" id="search_btn">Search</button>
    		    </form>
    	    </div>
    	    
    	    <tags:sort/>
    	</div>
    	
    	<c:forEach items="${blogs.content}" var="blog">
    		<p><a href="${ctx}/blog/detail/${blog.id}">${blog.title}</a></p>
    	</c:forEach>
    	
    	<tags:pagination page="${blogs}" paginationSize="5"/>
    </div>

因为分页和排序比较常用，也比较容易封装，所以单独创建了两个tag文件。

sort.tag:

<div class="nav dropdown pull-right">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        	<span>排序: </span>${sortTypes[param.sortType]} <b class="caret"></b>
        </a>
    	<ul class="dropdown-menu" >
    	   	<c:forEach items="${sortTypes}" var="entry">
    	   		<li><a href="?sortType=${entry.key}&${searchParams}">${entry.value}</a></li>
    		</c:forEach>
    	</ul>
    </div>

pagination.tag:

<%@ attribute name="page" type="org.springframework.data.domain.Page" required="true"%>
    <%@ attribute name="paginationSize" type="java.lang.Integer" required="true"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
    <%
    	int current = page.getNumber() + 1;
    	int begin = Math.max(1, current - paginationSize / 2);
    	int end = Math.min(begin + (paginationSize - 1), page.getTotalPages());
    
    	request.setAttribute("current", current);
    	request.setAttribute("begin", begin);
    	request.setAttribute("end", end);
    %>
    
    <ul class="pagination">
    	<%
    		if (page.hasPreviousPage()) {
    	%>
    	<li><a href="?page=1&sortType=${sortType}&${searchParams}"><<</a></li>
    	<li><a href="?page=${current-1}&sortType=${sortType}&${searchParams}"><</a></li>
    	<%
    		} else {
    	%>
    	<li class="disabled"><a href="#"><<</a></li>
    	<li class="disabled"><a href="#"><</a></li>
    	<%
    		}
    	%>
    
    	<c:forEach var="i" begin="${begin}" end="${end}">
    		<c:choose>
    			<c:when test="${i == current}">
    				<li class="active"><a href="?page=${i}&sortType=${sortType}&${searchParams}">${i}</a></li>
    			</c:when>
    			<c:otherwise>
    				<li><a href="?page=${i}&sortType=${sortType}&${searchParams}">${i}</a></li>
    			</c:otherwise>
    		</c:choose>
    	</c:forEach>
    
    	<%
    		if (page.hasNextPage()) {
    	%>
    	<li><a href="?page=${current+1}&sortType=${sortType}&${searchParams}">></a></li>
    	<li><a href="?page=${page.totalPages}&sortType=${sortType}&${searchParams}">>></a></li>
    	<%
    		} else {
    	%>
    	<li class="disabled"><a href="#">></a></li>
    	<li class="disabled"><a href="#">>></a></li>
    	<%
    		}
    	%>
    
    </ul>

这样就完成了分页，排序，搜索的功能。是不是很简单。其实这远远不够，可以封装的更通用些。不知道这样有没有什么问题。先抛个砖！

最后修改了样式后的效果图：

![20160819183117134][]  
  
补充：若search时字符乱码，请配置tomcat server.xml文件。修改为：

[markdown]: http://blog.csdn.net/qq_19558705/article/details/52171181
[markdown 1]: http://blog.csdn.net/qq_19558705/article/details/52121321
[markdown 2]: http://blog.csdn.net/qq_19558705/article/details/51993884
[http_blog.csdn.net_qq_19558705_article_details_52265947]: http://blog.csdn.net/qq_19558705/article/details/52265947
[http_www.itit123.cn]: http://www.itit123.cn/
[20160819155159704]: /images/20220718/dd03b3ffd0094974be101f4c67f16e30.png
[20160819155207626]: /images/20220718/310f64c625c24046ae9cda9e573d15e4.png
[20160819155215848]: /images/20220718/d6fd5cf6cf134f5393ec26ec3692720a.png
[20160819155230224]: /images/20220718/8c35cf334b9a494490c031a80b11c0ec.png
[20160819155238943]: /images/20220718/f35d7f28f79845c7ae8250906f9ace12.png
[http_blog.csdn.net_qq_19558705_article_details_50413254]: http://blog.csdn.net/qq_19558705/article/details/50413254
[20160819183117134]: /images/20220718/5045c316d2ee478e91ee0441f013988c.png