一開始寫項目的時候，沒用ajax，導致做搜索分頁功能的時候廢了好大的勁，在這里分享一下處理這個問題的思路。
框架用的springboot，通過thymeleaf模板和前端交互，沒有使用ajax，所以數據都是在域對象放的。分頁用的springdatajpa的分頁，他個其他的分頁工具大同小異，優點在於不用在引入新的依賴，直接通過查詢得到的就是Page對象，缺點就是springdatajpa自帶的分頁工具其起始頁是從0開始的，這一點比較惡心，哈哈。
主要思路就是把搜索條件和分頁的請求地址都在域中定義，然后再js方法中得到這些信息，發送請求的時候調用js方法，拼接帶搜索條件的參數。
--page分頁-- 代碼寫的啰嗦，抽時間優化一下
<div class="box-footer" th:fragment="page" xmlns:th="http://www.thymeleaf.org"> <div class="modal-footer no-margin-top"> <div class="pull-left"> <div class="form-group form-inline"> 總共<span th:text="${page.totalPages}"></span> 頁，共<span th:text="${page.totalElements}"></span> 條數據。 </div> </div> <div class="page"> <ul class="pagination" th:if="${page.totalPages le 8 && page.totalPages gt 1}"> <!-- 上一頁 --> <li class="page-item" th:if="${page.pageable.getPageNumber() != 0}"> <a th:onclick="pageRequest([[${page.pageable.getPageNumber()-1}]])" class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!-- 迭代生成頁碼 --> <li th: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' : ''" > <a class="page-link" th:onclick="pageRequest([[${i}-1]])"> <span data-th-text="${i}"></span> </a> </li> <!-- 下一頁 --> <li class="page-item" th:if="${page.pageable.pageNumber} != ${page.totalPages}-1"> <a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])"> » </a> </li> </ul> <!-- 處理頁數大於7 的情況 --> <ul class="pagination" data-th-if="${page.totalPages gt 7}" > <!-- 上一頁 --> <li class="page-item" data-th-if="${page.pageable.getPageNumber() != 0}"> <a th:onclick="pageRequest([[${page.pageable.getPageNumber()-1}]])" class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!-- 首頁 --> <li class="page-item" data-th-classappend="${(page.number + 1) eq 1} ? 'active' : ''" > <a th:onclick="pageRequest(0)" class="page-link" data-th-attr="pageIndex=0">1</a> </li> <!-- 當前頁面小於等於4 --> <li 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' : ''" > <a class="page-link" th:onclick="pageRequest([[${i-1}]]) " data-th-attr="pageIndex=${i} - 1"> <span data-th-text="${i}"></span> </a> </li> <li class="page-item disabled" data-th-if="${(page.number + 1) le 4}"> <a class="page-link"> <span aria-hidden="true">...</span> </a> </li> <!-- 最后一頁與當前頁面之差，小於等於3 --> <li class="page-item disabled" data-th-if="${(page.totalPages-(page.number + 1)) le 3}"> <a class="page-link"> <span aria-hidden="true">...</span> </a> </li> <li 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' : ''" > <a class="page-link" th:onclick="pageRequest([[${i-1}]])" data-th-attr="pageIndex=${i} - 1"> <span data-th-text="${i}"></span> </a> </li> <!-- 最后一頁與當前頁面之差大於3，且 當前頁面大於4--> <li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"> <a class="page-link"> <span aria-hidden="true">...</span> </a> </li> <li 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' : ''"> <a th:onclick="pageRequest([[${i-1}]])" class="page-link" data-th-attr="pageIndex=${i} - 1"><span data-th-text="${i}"></span></a> </li> <li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"> <a class="page-link"> <span aria-hidden="true">...</span> </a> </li> <!-- 最后一頁 --> <!-- <li class="page-item" data-th-classappend="${(page.number + 1) eq page.totalPages} ? 'active' : ''" >--> <!-- <a th:onclick="pageRequest([[${page.getTotalPages() - 1}]])" class="page-link" data-th-attr="pageIndex=${page.totalPages} - 1">[[${page.totalPages}]]</a>--> <!-- </li>--> <li class="page-item" data-th-classappend="${(page.number + 1) eq page.totalPages} ? 'active' : ''"> <a th:onclick="pageRequest([[${page.getTotalPages() - 1}]])" class="page-link" >[[${page.totalPages}]]</a> </li> <!-- 下一頁 --> <li class="page-item" th:if="${page.pageable.pageNumber} != ${page.totalPages}-1"> <a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])"> » </a> </li> </ul> </div> </div> </div>
代碼中，請求的地方調用了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<WorkOrder> 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"; }