前臺：
<form method="post" action = "/bbs/list" id="queryform">
<input type="hidden" name="start" id="start"/>
<li>搜索：</li>
<input type="text" placeholder="請輸入公告名稱" name="title" th:value ="${queryBbs.title}" />
<a href="javascript:void(0)" class="button border-main icon-search" onclick="changesearch()" > 搜索</a>
</form>
//搜索
function changesearch() {
$("#queryform").submit();
}
通過page傳值
<div class="pagelist" th:include="common/footer::page"/>
包含頁面
<!--fotter-->
<div class="pagelist" th:fragment="page">
<a th:onclick="javascript:page(0)">[首 頁]</a>
<a th:onclick="javascript:page([[${page.pageNum}]]-1)">[上一頁]</a>
<a th:onclick="javascript:page([[${page.pageNum}]]+1)">[下一頁]</a>
<a th:onclick="javascript:page([[${page.pages}]])">[尾 頁]</a>
共[[${page.total}]]條記錄
</div>
//分頁跳轉方法
function page(pageNum) {
$("#start").val(pageNum);
$("#queryform").submit();
}
此種方法可以將搜索查詢框內容通過form表單的方式提交給controller,controller再分頁，但點“下一頁”事件多點二次很容易導致瀏覽器假死。
第二種方式：直接通過href傳值，這種方式不死機。
<div class="pagelist">
<a th:href="@{/bbs/list(start=0,title=${queryBbs.title})}">[首 頁]</a>
<a th:href="@{/bbs/list(start=${page.pageNum-1},title=${queryBbs.title})}">[上一頁]</a>
<a th:href="@{/bbs/list(start=${page.pageNum+1},title=${queryBbs.title})}">[下一頁]</a>
<a th:href="@{/bbs/list(start=${page.pages},title=${queryBbs.title})}">[尾 頁]</a>
共[[${page.total}]]條記錄
</div>