springboot+thymeleaf处理带搜索条件的分页问题解决思路

一开始写项目的时候，没用ajax，导致做搜索分页功能的时候废了好大的劲，在这里分享一下处理这个问题的思路。

框架用的springboot，通过thymeleaf模板和前端交互，没有使用ajax，所以数据都是在域对象放的。分页用的springdatajpa的分页，他个其他的分页工具大同小异，优点在于不用在引入新的依赖，直接通过查询得到的就是Page对象，缺点就是springdatajpa自带的分页工具其起始页是从0开始的，这一点比较恶心，哈哈。

主要思路就是把搜索条件和分页的请求地址都在域中定义，然后再js方法中得到这些信息，发送请求的时候调用js方法，拼接带搜索条件的参数。

--page分页-- 代码写的啰嗦，抽时间优化一下

class="box-footer" th:fragment="page" xmlns:th="http://www.thymeleaf.org">
    
class="modal-footer no-margin-top">
        
class="pull-left">
            
class="form-group form-inline">
                总共"${page.totalPages}"> 页，共"${page.totalElements}">  条数据。
            
        
        
class="page">
            
class="pagination" th:if="${page.totalPages le 8 && page.totalPages gt 1}">
                
                
class="page-item" th:if="${page.pageable.getPageNumber() != 0}">
                    "pageRequest([[${page.pageable.getPageNumber()-1}]])"     class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
                        "true">«
                    
                



                
                
if="${page.totalPages gt 1}" class="page-item" data-th-each="i : ${#numbers.sequence(1, page.totalPages)}"
                    data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
                    class="page-link" th:onclick="pageRequest([[${i}-1]])">
                        "${i}">
                    
                

                
                
class="page-item"  th:if="${page.pageable.pageNumber} != ${page.totalPages}-1">
                    class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">
                        »
                    
                
            
            
            
class="pagination" data-th-if="${page.totalPages gt 7}" >


                
                
class="page-item" data-th-if="${page.pageable.getPageNumber() != 0}">
                    "pageRequest([[${page.pageable.getPageNumber()-1}]])"     class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
                        "true">«
                    
                

                
                
class="page-item" data-th-classappend="${(page.number + 1) eq 1} ? 'active' : ''" >
                    "pageRequest(0)"  class="page-link" data-th-attr="pageIndex=0">1
                


                
                
class="page-item" data-th-if="${(page.number + 1) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}"
                    data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
                    class="page-link" th:onclick="pageRequest([[${i-1}]]) "      data-th-attr="pageIndex=${i} - 1">
                        "${i}">
                    
                

                
class="page-item disabled" data-th-if="${(page.number + 1) le 4}">
                    class="page-link">
                        "true">...
                    
                

                
                
class="page-item disabled" data-th-if="${(page.totalPages-(page.number + 1)) le 3}">
                    class="page-link">
                        "true">...
                    
                
                
class="page-item" data-th-if="${(page.totalPages-(page.number + 1)) le 3}" data-th-each="i : ${#numbers.sequence(page.totalPages-4, page.totalPages-1)}"
                    data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
                    class="page-link" th:onclick="pageRequest([[${i-1}]])"                       data-th-attr="pageIndex=${i} - 1">
                        "${i}">
                    
                

                

                
class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
                    class="page-link">
                        "true">...
                    
                

                
class="page-item" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}" data-th-each="i : ${#numbers.sequence(page.number, page.number+3)}" data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''">
                    "pageRequest([[${i-1}]])" class="page-link" data-th-attr="pageIndex=${i} - 1">"${i}">
                

                
class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
                    class="page-link">
                        "true">...
                    
                

                
                
                
                
                
class="page-item" data-th-classappend="${(page.number + 1) eq page.totalPages} ? 'active' : ''">
                    "pageRequest([[${page.getTotalPages() - 1}]])" class="page-link" >[[${page.totalPages}]]
                
                
                
class="page-item"  th:if="${page.pageable.pageNumber} != ${page.totalPages}-1">
                    class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">
                        »
                    
                
            

        
    

代码中，请求的地方调用了js方法，因为请求是不固定的，所以js中具体定义请求的路劲。

    function pageRequest(param) {var url = '[[${url}]]';//这个写法可以把域中的地址拿到       请求是后端转发到前端（不是重定向）
        url = url.replace('&','&');//这个是个bug，后端放到域中的&到前端之后被转义成&； 了，所以我在这里在替换一下
        var search = '[[${search}]]' //获取域中的搜索条件
        var url1 = url+param+'&search='+serach;
        //alert(url);
        location.assign(url1)
    }

controller层代码

@RequestMapping("/list")
    public String all(String search,Model model, @RequestParam(defaultValue = "0")Integer pageNum,@RequestParam(defaultValue = "1") Integer requestStatus){
        model.addAttribute("url","/workOrder/list?requestStatus="+requestStatus+"&pageNum=");
        Page page = null;
        switch (requestStatus){
            case 1://全部
                page = workOrderService.search(workOrder,pageNum,10);
                model.addAttribute("class","1");//用于按钮状态回显 我再前端有判断
                break;
            case 2://本人发起
                page = workOrderService.findPageMyWorkOrder(pageNum, 10);
                model.addAttribute("class","2");
                break;
            case 3://处理中
                page = workOrderService.findPageUnSuccessWorkOrder(pageNum, 10);
                model.addAttribute("class","3");
                break;
            case 4://已完成
                page = workOrderService.findPageSuccessWorkOrder(pageNum, 10);
                model.addAttribute("class","4");
                break;
            default:
                break;
        }
        model.addAttribute(search);
        model.addAttribute("page",page);//包含分页的信息和查询到的信息
        return "workOrder-list";
    }